爲什麼獨立渲染不同於內聯SVG在多個瀏覽器中？

當您將其保存爲arrow.html並在現代瀏覽器中打開它時，此箭頭呈現得很好。（Edge，Firefox，Chrome）。爲什麼獨立渲染不同於內聯SVG在多個瀏覽器中？

<!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中看起來不正確。所以，也許我做錯了什麼？有人知道我在做什麼錯嗎？

來源

2016-09-15 Gilles Marek