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标记刻度只有一个维度与笔画宽度

回答

相关问题