Question

我有一个带有嵌入式SVG图标元素的简单HTML5页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
  </head>
  <body>
    <h1>
      <span>ABC</span>
      <svg id="move-icon"
           width="0.7em" height="0.7em"
           viewBox="0 0 10 10"
           style="display: inline-block">
        <defs>
          <marker id="arrow-end-marker"
                  viewBox="0 0 10 10" refX="0" refY="5"
                  markerHeight="3"
                  orient="auto">
            <polygon points="0 0 10 5 0 10" />
	  </marker>
        </defs>
        <line x1="5" y1="5" x2="5" y2="7"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
        <line x1="5" y1="5" x2="3" y2="5"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
        <line x1="5" y1="5" x2="5" y2="3"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
        <line x1="5" y1="5" x2="7" y2="5"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
      </svg>
    </h1>
    <p>abc</p>
    <h2>
      <span>DEF</span>
      <!-- reuse here -->&#10067;
    </h2>
    <p>def</p>
  </body>
</html>

现在我想在第二个标题中重用嵌入式SVG图标。怎么办呢？

Answer 1

symbol + use + xlink:href="#symbol-id"

定义一次符号，并在其他svg文档中使用

<!-- define symbol in hidden svg document -->
<svg style="display: none">
  <symbol id="circle-arrow-left" viewbox="0 -10 100 110">
    <path d="m 20 80 A 40 40 0 1 0 20 20"
      fill="none" stroke="#000" stroke-width="10" />
    <path d="M 10 0 v 40 h 40"
      fill="#000" />
  </symbol>
</svg>

<!-- use symbol of external svg document -->
<button>
  <svg width="50" height="50">
    <use xlink:href="#circle-arrow-left" />
  </svg>
</button>

<!-- transform symbol with horizontal flip -->
<button>
  <svg width="50" height="50" style="transform: scale(-1, 1)">
    <use xlink:href="#circle-arrow-left" />
  </svg>
</button>

相关：

https://css-tricks.com/svg-symbol-good-choice-icons/

https://css-tricks.com/svg-use-with-external-reference-take-2/

Answer 2

您可以将SVG保存到文件中，并直接在＆lt; img＆gt; tag.like this

<img src="toto.svg" alt="toto description">

Answer 3

我现在有一个解决方案，但我不知道，为什么这样做。可以定义可以克隆的template。但克隆意味着重复id属性。这意味着它们不再是独一无二的。但是在marker-end中引用它们似乎仍然是可能的。这有点奇怪，我不确定，如果跟踪这条赛道是明智的。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
  </head>
  <body>
    <h1>
      <span class="movable">ABC</span>
    </h1>
    <p>abc</p>
    <h2>
      <span class="movable">DEF</span>
    </h2>
    <p>def</p>
    <template id="move-icon">
      <svg width="0.7em" height="0.7em"
           viewBox="0 0 10 10"
           style="display: inline-block; vertical-align: baseline">
        <defs>
          <marker id="arrow-end-marker"
                  viewBox="0 0 10 10" refX="0" refY="5"
                  markerHeight="3"
                  orient="auto">
            <polygon points="0 0 10 5 0 10" />
	  </marker>
        </defs>
        <line x1="5" y1="5" x2="5" y2="7"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
        <line x1="5" y1="5" x2="3" y2="5"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
        <line x1="5" y1="5" x2="5" y2="3"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
        <line x1="5" y1="5" x2="7" y2="5"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
      </svg>
    </template>
    <script>
      (function() {
         var icon = document.querySelector('#move-icon');
         var spans = document.querySelectorAll('span.movable');
         for (var i = 0; i < spans.length; i += 1)
           spans[i].parentNode.appendChild (icon.content.cloneNode(true));
       })();
    </script>
  </body>
</html>

＆＃13;

如何在同一页面中重用嵌入式SVG元素？

3 个答案: