带路径的SVG模式不会显示

Question

为什么路径不显示为rect的模式？

{{1}}

https://jsfiddle.net/t5k5ppgb/

Answer 1

这就是你的模式：

路径是在坐标[350,250]（红色矩形）周围绘制的，但是因为您将模式的width和height设置为20，所以您应该只使用左上角20x20的正方形（绿色方块）。因此，模式是在rect上使用，但只是一个空的区域。

如果要将图案大小保持在20x20像素，则需要告诉图案移动并将有趣的部分调整到视图中。这可以通过viewBox设置完成：

<pattern id="secondPattern" ... viewBox="300 200 130 140">

这表示我们要显示的内容从坐标[300,200]开始，从该坐标开始，我们想要显示130x140px的区域。现在，您可以将模式的width和height设置为您喜欢的任何内容，并且“牙签”将始终保持在视图中。

https://jsfiddle.net/t5k5ppgb/3/

顺便说一下，在x上设置y和path不会做任何事情。