SVG图案不重复

Question

我在尝试使用SVG并参考了这个示例。然而，在我的jsbin中，图案没有重复出现在我的<rect>元素上。
当我更改高度和宽度属性（不是更改x、y属性）时，rect SVG对象在我输入大值时就消失了。
我只是初步了解SVG，所以我的知识非常有限。我想这是一个简单的问题，但是当我与我所参考的grid2.svg进行比较时，我没有看到我做错了什么。

- N Klosterman

Answer 1

您写了这个...

<pattern id="OvalPattern2" patternUnits="objectBoundingBox" width="70" height="70" >

使用objectBoundingBox单位时，1是使用它的形状的大小。因此，您的图案是使用它的对象的大小的70倍。我怀疑您想要.7作为宽度/高度。

- Robert Longson

---

嗯，我觉得我有些困惑，需要更好地理解patternUnits="objectBoundingBox"和patternUnits="userSpaceOnUse"之间的区别以及patternContentUnits的用法。改用userSpaceOneUse可以解决图案自动重复的问题，而不必担心调整图案大小以使其在元素中正确重复。目前，我的用例将设置图案无限重复。http://jsbin.com/dajix/2 <-- 这个jsbin部分展示了我想要的结果。我希望第二个<rect>中的图案重新开始。 - N Klosterman

使用"objectBoundingBox"，值"1"表示元素的宽度（或高度）。因此，如果width="0.5"，height="1"，则填充将由图案的两个副本组成（并排）。对于width="0.5" height="0.5"，您将在2x2的布局中获得四个图案副本。明白了吗？ - Paul LeBeau

是的，那很有道理。不过，我仍然在努力让第二个<rect>显示出图案，并使图案在矩形内重新开始。你有什么想法吗？ - N Klosterman

听起来你也想使用patternContentUnits="objectBoundingBox"，并调整图案内容以使用这些单位。 - Robert Longson

patternContentUnits="objectBoundingBox" 表示图案内容元素的位置必须在0到1之间。 - Robert Longson