Question

我试图将SVG sprite icone重用到新的SVG对象中。新对象只是一个包含精灵图标的圆圈。我知道我需要使用defs标签将一些形状组合在一起，但我在defs标签内引用我的精灵icone时遇到了问题。

子画面：

<svg style="display:none;">
<symbol id="icon_1" viewBox="0 0 54 54">
  <path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
  <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
</symbol >

新对象：

<svg><defs>
<g id="shape">
    <circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
    <image x="0" y="0" xlink:href="#icon_1"></image>
</g>

我读到我可以使用图像标签来引用SVG元素。显然我做错了什么。基本上预期的结果应该是带有图标的描边圆圈以某种方式，我将能够动画整个对象

由于

Answer 1

You were close. Your main problem was that you were careless with your opening and closing tags.

Your second SVG had a stray opening <html> <head> </head> <style> .space{margin-left:50px} </style> <body> hello <span class="space"></span>world </body> </html> element, which meant that the <defs> element was left inside the <g id="shape"> section. <defs> is for defining elements to be re-used later, and anything in a <defs> will only be drawn when referenced from elsewhere.

There were a couple of other problems.

You can't use an <defs> to reference a symbol. You will need to use a <image> for that.
You will need to supply a <use> and width so that the symbol gets draw at an appropriate size.

height

Answer 2

image标记旨在用于完整图像，而不是分数。我想use是您用例的正确标记。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1">
  <symbol id="icon_1" viewBox="0 0 54 54">
    <path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
    <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
  </symbol>
  <defs>
     <g id="shape">
      <circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
      <use x="2" y="-3" width="80" height="80" xlink:href="#icon_1"/>
    </g>
  </defs>
  <use xlink:href="#shape"/>
</svg>

此外，如果精灵位于单独的文件中，则必须引用该文件中的符号：<use hlink:href="sprites.svg#icon1"/>。

将几个SVG分组到一个对象中

2 个答案: