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>

这在白色背景的圆圈内给了我紫色条纹。如何将白色背景更改为黑色？我尝试过将“填充”和“笔划”放在模式和路径中的各个位置，但无济于事。

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>

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

1 个答案: