Question

目标是基于一个SVG创建具有不同符号的多个按钮（在我的情况下为两个）。我有一个包含3组矢量形状的SVG文件。一组是需要用特定颜色填充的背景（悬停）。另外两个组包含不同的符号（椭圆，正方形），并在末尾以ZZZ命名。一个按钮应显示椭圆形，另一个按钮应显示方形。除非将它们作为目标，否则我已在SVG中将这两个组设置为“ display：none”。test.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实例。

通过外部SVG文件中的ID按目标符号

1 个答案: