按外部 SVG 文件中的 ID 定位符号

Question

目标是基于一个SVG创建多个按钮(在我的例子中是两个(具有不同符号。 我有一个 SVG 文件，其中包含 3 组带有矢量形状。 一组是需要用特定颜色(悬停(填充的背景。 另外两个组包含不同的符号(椭圆，正方形(，并在末尾以ZZZ命名。 一个按钮应显示椭圆，另一个按钮应显示正方形按钮。 我在 SVG 中将这两个组设置为"display：none"，除非它们是目标。测试内容.svg如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><style>
.cls-1 {
fill: #340000;
}
.cls-2 {
fill: none;
stroke: #fff;
stroke-miterlimit: 10;
}
[id$=zzz] { display: none; }
g:target { display: block; }        
</style></defs><g id="Layer_2" data-name="Layer 2"><g id="test"><g id="group_background" data-name="group background"><rect id="shape_background" data-name="shape background" class="cls-1" width="22" height="22"/></g><g id="square_zzz" data-name="square zzz"><rect id="shape_square" data-name="shape square" class="cls-2" x="4.731" y="4.237" width="13.119"height="13.119"/>
</g>
<g id="ellipse_zzz" data-name="ellipse zzz">
<circle id="shape_ellipse" data-name="shape ellipse" class="cls-2" cx="11.29" cy="10.797" r="6.693"/>
</g></g></g></svg>

在我的 CSS 中，我试图在按钮上显示不同的形状：

.button1{background-image:url(test.svg#square_zzz);}.button2{background-image:url(test.svg#ellipse_zzz);}

然而，什么也没出现。

Answer 1

问题被驳回。定位 ID 工作正常 - ( Dreamweaver 实时取景问题(。 仍在尝试弄清楚如何使用CSS更改目标组上背景和形状的颜色，并将cloneNode((实现为复制按钮，而无需为每个按钮创建多个SVG实例。