爲什麼我的SVG路徑中的marker-start不顯示在瀏覽器中（但在生成的PNG中）？

有人可以告訴我，爲什麼在以下文件中的左箭頭顯示在生成的PNG中正確顯示，但不在瀏覽器中顯示？爲什麼我的SVG路徑中的marker-start不顯示在瀏覽器中（但在生成的PNG中）？

https://commons.wikimedia.org/wiki/File:SVG_double_arrow_with_marker-start_and_marker-end.svg

在Firefox中它只是不存在，並在Chrome中我看到它指向右下方，而不是離開。

這是兩個指標：

<marker id="arrowend" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto"> 
    <path d="M 0 0 C 0 0, 3 5, 0 10 L 0 10 L 13 5" fill="red"/> 
</marker> 

<marker id="arrowstart" viewBox="0 0 -13 -10" refX="-2" refY="-5" markerWidth="-3.5" markerHeight="-3.5" orient="auto"> 
    <path d="M 0 0 C 0 0, -3 -5, 0 -10 L 0 -10 L -13 -5" fill="red"/> 
</marker>

我的解決方案基於以下提示：

<marker id="arrowstart" viewBox="0 0 13 10" refX="11" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto"> 
    <path d="M 13 0 C 13 0, 10 5, 13 10 L 13 10 L 0 5" fill="red"/> 
</marker>

因此，我改變的實際路徑。我所有試圖反映它的嘗試都失敗了，所以對我來說這是最好的解決方案。

這就是我把它放在行動，BTW：https://commons.wikimedia.org/wiki/Category:Full_octahedral_group;_single_elements;_signed_perm_mat,_perm_mat_and_cube

來源

2017-04-23 Watchduck

視框與negative width and height is invalid。無效的viewBoxes的內容不呈現。

如果Chrome以任何方式呈現arrowstart，那就是Chrome bug。無論你使用的PNG發生器是什麼，顯然也是越野車。

這裏得到兩端，箭頭在支持東方=「自動啓動反」瀏覽器至少

<svg width="500" height="300" viewBox="0 0 200 50"> 
 
    <defs> 
 
     <marker id="arrow" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto-start-reverse"> 
 
      <path d="M 0 0 C 0 0, 3 5, 0 10 L 0 10 L 13 5" fill="red"/> 
 
     </marker> 
 
    </defs> 
 

 
    <line x1="25" y1="25" x2="175" y2="25" stroke="red" stroke-width="5" marker-start="url(#arrow)" marker-end="url(#arrow)"/> 
 

 
</svg>

來源

2017-04-23 20:50:47

，在瀏覽器中工作的一種方式，但最在呈現的PNG中，這兩個箭頭都指向右側：https：//commons.wikimedia.org/wiki/File:SVG_double_arrow_with_auto-start-reverse.svg – Watchduck

爲什麼我的SVG路徑中的marker-start不顯示在瀏覽器中（但在生成的PNG中）？

回答

相關問題