模式不显示的原因

Question

为什么图案不在圆圈内显示?

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern" viewBox="0 0 1000 1000" width="10%" height="10%">
<polygon points="569.2 518 396 618 222.8 518 222.8 318 396 218 569.2 318" fill="none" stroke="orange" />
</pattern>
</defs>

<circle cx="50"  cy="50" r="50" stroke="black" fill="url(#pattern)" />
</svg>

Answer 1

SVG没有出现显示任何内容的原因有以下几个:

• 1. 您的图案被定义为仅占容器形状(width=10% height=10%)的10%。这是好的，但如果你的容器面积只有50px，那么你只能使用5px by 5px的模式的每次迭代。
• 2. 再加上(2)，你的圆被定义为直径只有50px，所以你告诉SVG只显示形状的轮廓，只占一个圆的内容的10%的比例只有50px宽…所以你的形状最多只能宽度为5px;然而你的形状在viewbox区域实际上只使用了这个viewbox区域的一半(1000x1000)。

• 3. 和然后因为你有fill=none和stroke=orange你的模式只是一个轮廓(描边宽度默认为1)，所以这就是为什么模式被四舍五入为零-即不可见;

     因为容器的级联都小于定义为1000的矢量视图框绘制区域-所以viewbox为1000，默认描边宽度为1，然后当你将其缩小到50px的圆时，你的线太小了，没有价值，必须被浏览器忽略，因为它的大小远远小于1px(浏览器像素)。

     这个>这就是为什么你看不到圆里的线。

修复例子:

• 圆圈大小增加到100px，以提高清晰度;
• Pattern标量缩放增加到20%宽度和高度的清晰度
• 多边形描边宽度手动设置为更厚(更明显:2%)。

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern" viewBox="0 0 1000 1000" width="20%" height="20%">
<polygon points="569.2,518 396,618 222.8,518 222.8,318 396,218 569.2,318" fill="none" stroke="orange" stroke-width="2%" />
</pattern>
</defs>

<circle cx="200"  cy="200" r="100" stroke="black" fill="url('#pattern')" />
</svg>