SVG標記刻度只有一個維度與筆畫寬度

我有SVG行厚度變化，他們都在最後有一個箭頭形式的標記，就像在這fiddle。默認情況下，markerUnits設置爲strokeWidth，它根據線的筆觸寬度縮放箭頭的兩個（！）尺寸。另一方面，我只想縮放y尺寸，如下面非常漂亮的油漆圖（應該表現得像橙色箭頭，紅色不是我想要的）所示。SVG標記刻度只有一個維度與筆畫寬度

enter image description here

這樣做的原因是，我要建模的人正從一個地方到另一個地方的數量，但箭都應該有嚴格相同的長度（即線長度是不是一個視覺提示，只筆畫寬度是）。

有沒有什麼辦法可以做到這一點「動態」;即不總是重新計算標記的路徑？有沒有可以做到這一點的圖書館，例如D3？

來源

2014-12-02 wnstnsmth

不要更改筆畫寬度，而是在y方向上縮放線條，例如，

<svg width="90%" height="90%"> 
 
    <defs> 
 
     <marker orient="auto" viewBox="-.1 -5 10 10" id="g-arrowhead-rep"> 
 
      <path fill="#808600" class="g-marker g-rep" d="M-.1,-5L4,0L-.1,5"></path> 
 
     </marker> 
 
    </defs> 
 
    <g> 
 
     <path id="k9ffd8001" d="M10,20,200,20" stroke="#808600" stroke-width="10" transform="rotate(0 0 0)" stroke-linecap="butt" stroke-linejoin="round" fill="none" marker-end="url(#g-arrowhead-rep)"></path> 
 
     <path id="k9ffd8001" d="M10 80 200 80" stroke="#808600" stroke-width="10" transform="translate(0, -80) scale(1,2) " stroke-linecap="butt" 
 
     stroke-linejoin="round" fill="none" marker-end="url(#g-arrowhead-rep)"></path> 
 
     
 
    </g> 
 
</svg>

來源

2014-12-02 17:00:49

這工作，至少在Firefox。在Chrome中，線條/箭頭根本不顯示，而在IE（甚至IE11）中，箭頭是圓形的，方式太大。你也知道這個解決方案嗎？ http://jsfiddle.net/8uxqK/307/ – wnstnsmth 2014-12-03 08:03:17

好的，它沒有在Chrome中顯示的原因是svg標籤的空viewbox屬性。 http://jsfiddle.net/8uxqK/309/所以唯一的問題是IE。 9-11。： -/ – wnstnsmth 2014-12-03 08:23:23

聽起來像一個IE錯誤。我猜你可以把它報告給微軟。 – 2014-12-03 08:56:17

SVG標記刻度只有一個維度與筆畫寬度

回答

相關問題