Question

当您将其保存为arrow.html并在现代浏览器中打开时，此箭头呈现正常。（Edge，Firefox，Chrome）。

<!DOCTYPE html>
<svg
    width="490" height="385"
    viewBox="0 0 490 385">
<defs>
    <marker id="arrow-b" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,4 L6,2 z" fill="#000" />
    </marker>

    <marker id="arrow-a" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth">
        <path d="M0,2 L6,0 L6,4 z" fill="#000" />
    </marker>
</defs>

<line x1="10" y1="10" x2="480" y2="370" stroke="#000" stroke-width="2" marker-end="url(#arrow-b)" marker-start="url(#arrow-a)" />
</svg>

但是在HTML文件中使用内联会使其难以重用，因此我将以下内容保存到arrow.svg并在浏览器中打开它，看起来不对：

<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="490" height="385"
    viewBox="0 0 490 385">
<defs>
    <marker id="arrow-b" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,4 L6,2 z" fill="#000" />
    </marker>

    <marker id="arrow-a" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth">
        <path d="M0,2 L6,0 L6,4 z" fill="#000" />
    </marker>
</defs>

<line x1="10" y1="10" x2="480" y2="370" stroke="#000" stroke-width="2" marker-end="url(#arrow-b)" marker-start="url(#arrow-a)" />
</svg>

有趣的是它在Firefox，Chrome和Edge中看起来不对。那么，也许我做错了什么？有人知道我做错了吗？

Answer 1

独立SVG是基于XML的，区分大小写。

HTML不区分大小写，当您在HTML中嵌入SVG时，HTML解析器会尝试为您解决任何区分大小写问题。

你的标记refX和refY属性完全是小写的，这是无效的，并导致它们在独立文件中被忽略。

为什么独立呈现与多个浏览器中的内联SVG不同？

1 个答案: