SVG-如何给圆形填充图案的背景上色

Question

如果我有一个圆圈，并且我想要一个带有斜线紫色条纹的图案，我会创建以下

<circle fill='url(#diagonalHatchPurple)' />
<pattern id="diagonalHatchPurple" patternUnits="userSpaceOnUse" width="6" height="6">
<path d="M-1,1 l2,-2 
M0,4 l4,-4
M3,5 l2,-2" 
style="stroke:purple; stroke-width:2;" />
</pattern>

这给了我白色背景上圆圈内的紫色条纹。如何将白色背景更改为黑色？我试过在图案和路径的不同位置放置"填充"one_answers"笔划"，但都没有用。

Answer 1

圆圈在白色区域实际上是透明的，因此您可以在那里看到浏览器的背景。

如果你想让图案有一个黑色的背景，只需自己添加即可。

<svg viewBox="0 0 200 200">
<circle cx="50" cy="50" r="20" fill='url(#diagonalHatchPurple)' />
<pattern id="diagonalHatchPurple" patternUnits="userSpaceOnUse" width="6" height="6">
<rect width="6" height="6" fill="black"/>
<path d="M-1,1 l2,-2 
M0,4 l4,-4
M3,5 l2,-2" 
style="stroke:purple; stroke-width:2;" />
</pattern>
</svg>