【问题标题】:SVG pattern not repeatingSVG模式不重复
【发布时间】:2014-08-23 13:39:25
【问题描述】:

我正在使用 SVG,并且正在使用 this 示例。然而,在我的 jsbin 我的 <rect> 元素没有重复该模式。
当我更改高度和宽度属性(不,我没有更改 x , y 属性)时,rect svg 对象在我输入大值时就会消失。
我只是将我的脚趾浸入 SVG,所以我的知识非常有限。我认为这很简单,但是当我将我正在做的事情与我要离开的 grid2.svg 进行比较时,我没有看到我做错了什么。

【问题讨论】:

    标签: javascript svg


    【解决方案1】:

    这是你写的……

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

    使用 objectBoundingBox 单位 1 是使用它的形状的大小。所以你的图案是使用它的对象大小的 70 倍。我怀疑你想要 0.7 作为宽度/高度。

    【讨论】:

    • 我将图案的宽度/高度更改为 0.7,但对于 140/70 的宽度/高度的矩形,我希望图案重复 2 倍。它不是这样做的。我在重复的模式之间得到了空格。有什么想法吗?
    • 如果你想让图案重复两次,那么它的宽度/高度必须是 0.5
    • 嗯,我想我很困惑,需要更好地了解patternUnits="objectBoundingBox"patternUnits="userSpaceOnUse" 之间的区别以及patternContentUnits 的用法。切换到使用 userSpaceOneUse 正在解决模式自动重复问题,而不是担心模式的大小,以便它在元素中重复正确的 # 次。就目前而言,我的用例将无限期地重复设置模式。 jsbin.com/dajix/2 <rect> 让模式在其中重新开始。
    • 与“objectBoundingBox”,值“1”代表元素的宽度(或高度)。因此,如果 width="0.5" 和 height="1" 填充将由图案的两个副本(并排)组成。对于 width="0.5" height="0.5" 您将获得 2x2 排列的四个图案副本。这有意义吗?
    • 是的。这就说得通了。但是,我仍在努力让第二个&lt;rect&gt; 显示模式并让模式在矩形内重新开始。有什么想法吗?
    猜你喜欢
    • 1970-01-01
    • 2019-10-04
    • 1970-01-01
    • 1970-01-01
    • 2023-03-05
    • 2016-03-28
    • 2016-02-02
    • 2020-09-15
    • 2016-04-15
    相关资源
    最近更新 更多