在 HTML 中的多个 SVG 标签中使用标签？答案

【问题标题】：use Tag in multiple SVG tags in HTML?在 HTML 中的多个 SVG 标签中使用标签？
【发布时间】：2021-05-14 18:40:34
【问题描述】：

我在第一个标签中有两个 SVG 标签，我将内容（即 SVG 图像的代码）包装在符号标签中，以使其不可见并且可以在标签中使用。 use 标记在我创建符号标记的同一个 SVG 标记中工作正常。但是，当我在文档中创建另一个 SVG 标记并尝试使用该标记时，它不起作用（我认为这可能是由于在另一个 SVG 标记中使用了标记，我认为是这样）。所以谁能告诉我是否可以在另一个 SVG 标签中使用该标签（我想你明白我的意思了，代码会更清楚）

这里是代码（我已经评论了这个问题）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <svg id="hero-svg" width="300" height="300" viewBox="0 50 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">

    <symbol id="theBee" viewBox="0 0 78 49">
      <g id="complete_bee">
        <path id="bee head" d="M11.553 35.5047C16.3904 38.8245 21.8681 37.8364 24.0023 36.4532V15.1115C22.9352 14.4397 19.5917 13.499 14.7542 15.1115C9.9168 16.724 8.37329 20.5655 7.99604 21.7512C6.88944 25.2291 6.71554 32.1848 11.553 35.5047Z" fill="#FFE818" stroke="black" />
        <circle id="bee eye" cx="15.532" cy="21.6908" r="2.96412" fill="#313131" />
        <path id="bee trunk" d="M65.8034 15.1697C45.3154 7.5816 30.1154 12.008 23.9501 15.1697V36.6299C37.3242 43.649 56.6739 38.0527 64.1435 34.3772C78.0156 27.5513 77.7785 19.6049 65.8034 15.1697Z" fill="#FFE818" stroke="black" />
        <path id="trunk lines" d="M32.961 12.087C30.4711 16.1577 26.9142 26.5519 32.3682 39.3569L35.8065 39.8312C29.8309 27.5004 34.2652 15.5649 36.7551 11.4942L32.961 12.087Z" fill="#4E4E4E" stroke="black" />
        <path id="trunk lines_2" d="M42.9204 39.8312C36.9447 27.5005 41.2605 15.0907 43.7503 11.02L47.7815 11.1385C45.2917 15.2092 40.5017 27.1448 46.4773 39.4755L42.9204 39.8312Z" fill="#313131" stroke="black" />
        <path id="trunk lines_3" d="M53.947 38.0527C47.2667 27.313 51.8749 15.6325 54.6584 12.087L58.3339 12.7984C55.5504 16.3439 50.8236 26.246 57.504 36.9856L53.947 38.0527Z" fill="#313131" stroke="black" />
        <path id="trunk lines_4" d="M63.7528 34.6143C56.6849 26.8661 61.298 16.5925 64.38 14.6955L67.5819 15.8811C65.3292 18.6081 61.4051 23.9435 66.3963 33.1916L63.7528 34.6143Z" fill="#313131" stroke="black" />

        <path class="small-wing" d="M61.4166 1.06052C55.8203 0.206853 39.1659 8.60919 32.6053 12.0871C54.3264 11.3283 59.9938 9.00435 61.4166 8.05583C63.2303 6.8467 67.0128 1.91419 61.4166 1.06052Z" fill="#99CEFF" stroke="black" />

        <path class="large-wing" d="M32.9609 11.9685C48.0977 7.26541 80.3166 -2.14073 74.6957 7.34446C68.7675 14.5769 44.3036 13.6679 32.9609 11.9685Z" fill="#81D1FE" stroke="black" />
        <path id="bee sting" d="M70.4275 30.7017L73.273 27.7376L76 32.7173L70.4275 30.7017Z" fill="#313131" stroke="black" />

        <path id="antenna" d="M13.1606 15.8811C13.4768 12.6008 12.1173 5.73197 4.14972 4.4989M10.3151 17.8967C9.36656 14.4583 6.09418 8.05584 0.592773 9.95288" stroke="black" />
        <path id="bee legs" d="M30.3525 39.1198L26.2028 43.151L28.2184 46.2337M35.6879 39.9497L31.7753 44.5738L34.2652 48.605" stroke="black" />
        <circle id="antenna ball" cx="4.38689" cy="4.38033" r="0.592824" fill="#FFE818" />
        <circle id="antenna ball_2" cx="0.592824" cy="9.83431" r="0.592824" fill="#FFE818" />
        <path id="bee behind legs" d="M49.2044 39.2384L45.6475 43.6253L47.6631 45.9965M55.4883 37.8156L50.8643 43.6253L55.4883 46.8265" stroke="black" />
      </g>
    </symbol>
   <use xlink:href="#theBee" class="corr-p-3 bee" width="62.4" height="38.4" x="290" y="245" />
  </svg>
  
  
  <!-- But When I am using the use tag in blow svg tag its not working-->
<svg>
    <use xlink:href="#theBee" class="corr-p-3 bee" width="62.4" height="38.4" x="350" y="245" />
</svg>
  
  
</body>

</html>

【问题讨论】：

@EmielZuurbier 好的
SVG 2 删除了对 xlink 命名空间的需求，因此您应该使用 href https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href 而不是 xlink:href

标签： javascript html css svg

【解决方案1】：

一切都是为了让你的 viewBoxes 和定位正确。

你的第二只蜜蜂迷失在画布外的某个地方。您可以在 F12 中寻找它

给第二个 SVG 一个 viewBox.. 现在默认为.. 我永远记不住的默认值...但它肯定比你的 0 50 630 630 小

证明use 有效并且太小viewBox '切断'内容：

<style>
  svg{
    position:absolute;
    height:180px;
  }
</style>
<svg viewBox="0 0 100 100">
  <symbol id="theBee">
    <circle cx="50" cy="50" r="20"/>
  </symbol>
  <use href="#theBee" fill="green"/>
</svg>
<svg viewBox="0 0 50 50">
  <use href="#theBee" fill="red"/>
</svg>

viewBox，宽度和高度

<style>
  svg {
    background: pink;
    max-width:20vw;
  }

</style>

<svg>
  <ellipse cx="150" cy="75" rx="150" ry="75" fill="red" />
</svg>

<svg width="300" height="150">
  <ellipse cx="150" cy="75" rx="150" ry="75" fill="red" />
</svg>

<svg viewBox="0 0 300 150">
  <ellipse cx="150" cy="75" rx="150" ry="75" fill="red" />
</svg>

<svg viewBox="0 0 300 150" width="300" height="150">
  <ellipse cx="150" cy="75" rx="150" ry="75" fill="red" />
</svg>

【讨论】：

感谢您的回答我对此回答有些困惑，为什么应该（您的陈述）“给第二个 SVG 一个 viewBox.. 现在默认为.. 我永远记不起的默认值...但它肯定比你的 0 50 630 630 小”它做了什么你能让我明白这一点，如果这个问题看起来有用，你可以投票赞成，这将帮助我摆脱问题禁令的危险
他们在这篇文章中已经做到了css-tricks.com/svg-use-external-source
默认的viewBox是0 0 300 150；您的第二只蜜蜂位于外部这些边界（如红色圆圈）。让两个 SVG 使用相同的 viewBox
@Danny '365CSI' Engelman 非常感谢您指出我的错误，如果这个问题看起来有用，您可以点赞
@Danny'365CSI'Engelman 没有默认的 viewBox。替换元素的后备宽度和高度为 300 x 150，但这与 viewBox 并不完全相同。