隐藏具有相同定义的 SVG 时，SVG 标记消失

Question

考虑this HTML 片段：

<div class="container">
    <svg class="graph" style="visibility: hidden">
        <style type="text/css">
            <![CDATA[
              .arrow {
                fill: none;
                stroke-width: 2;
                stroke: #000;
                marker-end: url(#arrowhead);
              }
            ]]>
        </style>
        <defs>
            <marker id="arrowhead" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
                <path fill="#000" d="M 0 0 L 10 5 L 0 10 z"></path>
            </marker>
        </defs>
        <path class="arrow" d="M 0 0 L 100 10"></path>
    </svg>
    <svg class="graph">
        <style type="text/css">
            <![CDATA[
              .arrow {
                fill: none;
                stroke-width: 2;
                stroke: #000;
                marker-end: url(#arrowhead);
              }
            ]]>
        </style>
        <defs>
            <marker id="arrowhead" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
                <path fill="#000" d="M 0 0 L 10 5 L 0 10 z"></path>
            </marker>
        </defs>
        <path class="arrow" d="M 0 0 L 100 10"></path>
    </svg>
</div>

它包含一个 SVG 元素，该元素显示一个带有箭头的短箭头，在 SVG 元素的 <defs> 部分中定义。更具体地说，它包含该图像的两个副本。

这通常会呈现如下：

但是，第一个 SVG 元素是隐藏的。在 Chrome 中，结果如下所示：

看起来标记定义因第一个 SVG 被隐藏而无效 - 但在第二个 SVG 中有一个冗余定义（通过范围，每个定义应仅适用于其自己的元素）。

在 Firefox 中，我看到了相同的渲染。 Safari 显示箭头。

为什么 Chrome 和 Firefox 不呈现箭头？ 这是两个浏览器中的错误，还是我误解了规范？

Answer 1

主要错误：您使用了相同的ids 两次。此外，我会将 arrowhead 的 refX="10" 更改为其他内容，例如 5。

如果您需要再次使用箭头，请使用 <use> 元素。

svg{border:1px solid; width:45vw;}

<div class="container">  
    <svg class="graph" viewBox="-10 -10 120 50">
        <style type="text/css">
            <![CDATA[
              .arrow {
                fill: none;
                stroke-width: 2;
                stroke: #000;
                marker-end: url(#arrowhead);
              }
            ]]>
        </style>
        <defs>
            <marker id="arrowhead" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
                <path fill="#000" d="M 0 0 L 10 5 L 0 10 z"></path>
            </marker>
        </defs>
        <path class="arrow" id="theArrow" d="M 0 0 L 100 10"></path>
    </svg>
    
 <svg class="graph" viewBox="-10 -10 120 50">
 <use xlink:href="#theArrow" />
 </svg>
</div>

希望对你有帮助。