SVG HTML5仅在特定实例/用法中更改模式属性

时间:2015-10-22 08:41:59

标签: javascript html html5 svg snap.svg

我有一个SVG模式,我用它作为许多其他SVG的填充。 当然,当我之后更改模式中的属性时,它会在每个SVG中使用此模式进行更改。

是否有可能修改特定实例中的模式属性/仅使用?

我想避免在之前的100个不同版本中创建模式。

编辑样本:

这是一个示例模式。我在世界地图上的国家/地区使用此图标作为填充。图案内的圆圈用于设置背景颜色。

<svg width="0" height="0">
        <defs>
            <pattern id="infantry_svg" patternUnits="objectBoundingBox" width="100% " height="100%">
                <circle r="10" fill="transparent"></circle>
                <path d="M 19.328,3.097 19.025,2.633 18.35,3.045 17.638,2.148 17.555,3.563 15.188,5.011 C 14.818,4.596 14.555,4.484 14.555,4.484 L 10.343,7.079 10.039,6.959 9.871,6.7 13.072,4.919 C 12.811,4.496 12.29,3.65 12.29,3.65 L 9.295,5.893 9.173,5.968 9.028,5.732 8.342,6.155 8.488,6.393 8.276,6.523 7.838,5.811 7.152,6.234 7.59,6.946 7.293,7.129 7.146,6.891 6.46,7.314 6.606,7.551 6.584,7.566 3.881,8.993 4.556,10.089 7.139,8.339 C 7.26,8.536 7.353,8.687 7.353,8.687 l -1.748,1.074 0.293,0.456 -0.373,1.185 -1.518,1.412 c 0,0 -2.772,1.469 -4.007,2.152 0.308,0.691 0.964,1.57 1.443,2.214 0,0 4.855,-4.879 6.706,-4.765 l 1.837,-1.136 c 0,0 -0.752,-0.704 -0.5,-0.864 1.583,1.752 3.062,1.704 3.062,1.704 0.442,-0.568 0.528,-1.221 0.78,-1.834 -1.195,-0.286 -1.226,-0.103 -2.25,-1.111 l 4.673,-2.88 C 15.821,6.048 15.48,5.467 15.48,5.467 l 3.848,-2.37 z m -9.83,8.165 -1.203,0.742 c 0,0 -0.281,-0.437 -0.435,-0.688 l 0.265,-0.16 c 0.168,0.165 0.502,0.417 0.834,0.213 l -0.124,-0.2 C 8.662,11.275 8.461,11.146 8.333,11.03 l 0.743,-0.453 0.422,0.685 z"
                      fill="#030104" transform="translate(1,1.1) scale(0.29)" stroke="white" stroke-width="0.4" />
            </pattern>
        </defs>
    </svg>

现在,当我在一个国家/地区的圆圈内设置此模式时,它看起来像这样: enter image description here

国家/地区的圈子是使用Snap.svg生成的:

var circle = xs.circle(x, y, 4).attr({ id: "blabla", fill: "url(#infantry_svg)", stroke: "black", strokeWidth: 1 }).appendTo(xs.select('g'));

在此之后,我设置了用于此圆圈的图案的背景颜色:

$("#infantry_svg circle").attr({fill: troopOwner_color]});

现在每个圈子都使用&#34; infantry_svg&#34;模式,有&#34; troopOwner_color&#34;作为圆的背景颜色。

但我想更改模式用法的仅此单个实例

1 个答案:

答案 0 :(得分:2)

虽然你不能按照问题的具体要求做你想做的事,即使用模式。我不确定你为什么需要使用模式。

为什么不在defs语句中使用'use'元素,并且有一个路径&amp;在那里圈。然后你可以克隆它并改变填充......

Private Sub Worksheet_Change(ByVal Target As Range)
Dim myValue As Date

    If Target.Address = "$E$17" Then

        myValue = Application.InputBox("Geef de revisiedatum op, DD/MM/JJ", "Revisie datum")
        Range("$I$17").Value = myValue
        If myValue = False Then
            Range("$I$17") = ""
            Exit Sub
        End If
    End If

    If Target.Address = "$E$20" Then

        myValue = Application.InputBox("Geef de revisiedatum op, DD/MM/JJ", "Revisie datum")
        Range("$I$20").Value = myValue
        If myValue = False Then
            Range("$I$20") = ""
            Exit Sub
        End If
    End If
End Sub

jsfiddle

只需在defs元素中包含不会改变的位,并创建唯一的位。