SVG HTML5 仅更改特定 instance/usage 中的图案属性

Question

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

是否可以仅在特定 instance/use 中修改模式属性？

我想避免之前在 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>

现在当我在一个国家的圆圈内设置这个图案时，它看起来像这样：

国家上的圆是这样生成的 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]});

现在每个使用 "infantry_svg" 图案的圆圈，都有 "troopOwner_color" 作为圆圈的背景色。

但我只想更改模式用法的这个单一实例。

Answer 1

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

为什么不为 defs 语句使用 'use' 元素，并在其中添加路径和圆圈。然后你可以克隆它并更改填充...

<defs>
        <g id="infantry_svg" >
            <circle cx="30" cy="30" r="40"  stroke="red" stroke-width="5"/>
            <path>path stuff</path>
 </defs>


var g = s.g().use( Snap.select('#infantry_svg') );

var g1 = s.g( g ).attr({  fill: 'yellow' });
var g2 = g.clone().attr({ fill: 'blue',  transform: 't200,0' })
var g2 = g.clone().attr({ fill: 'green', transform: 't100,0' })

jsfiddle

只包含 defs 元素中不变的位，并创建唯一的位。

SVG HTML5 仅更改特定 instance/usage 中的图案属性

SVG HTML5 change pattern attributes in specific instance/usage only

html

javascript

svg

snap.svg

编辑示例：