2017-05-16 82 views
0

我有一堆代表使用折线旅行的SVG。SVG绝对线标记尺寸

我正在使用非缩放笔画向量效果来确保每个多段线都以绝对宽度呈现。所以当viewBox的尺寸发生变化时,折线的宽度不会变大。

在上述多义线的末尾,我想放置标记。我希望标记的大小也一样。我认为这应该很容易通过设置标记单位strokeWidth。

与多段线的笔划发生的情况相反,多段线末端标记的大小随viewBox的大小而变化。

下面我已经包括了一个例子,我在哪里使用了简单的标记圆圈。

<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" viewBox="131890.80533333332 85178.93015415945 198.25991111111944 205.10300513348193"> 
    <defs> 
    <marker id="end" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20"> 
     <circle cx="8" cy="16" fill="#000" r="4"></circle> 
    </marker> 
    <marker id="start" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20"> 
     <circle cx="8" cy="16" fill="#000" r="4"></circle> 
    </marker> 
    </defs> 
    <g> 
    <polyline fill="none" marker-end="url(#end)" marker-start="url(#start)" stroke="#000" stroke-linejoin="round" stroke-width="3" vector-effect="non-scaling-stroke" points="132089.06524444444, 85384.03315929293 131890.80533333332, 85178.93015415945"> 
    </polyline> 
    </g> 
</svg> 

<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" viewBox="132038.56071111112 85364.68902323228 50.557866666669725 19.330493533576373"> 
    <defs> 
    <marker id="end" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20"> 
     <circle cx="8" cy="16" fill="#000" r="4"></circle> 
    </marker> 
    <marker id="start" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20"> 
     <circle cx="8" cy="16" fill="#000" r="4"></circle> 
    </marker> 
    </defs> 
    <g> 
    <polyline fill="none" marker-end="url(#end)" marker-start="url(#start)" stroke="#000" stroke-linejoin="round" stroke-width="3" vector-effect="non-scaling-stroke" points="132038.56071111112, 85364.68902323228 132089.1185777778, 85384.01951676585"> 
    </polyline> 
    </g> 
</svg> 

参见:https://jsfiddle.net/u4bmupza/3/

我丢失了一些SVG属性或者我应该计算手动标记的大小?

回答

1

vector-effect="non-scaling-stroke最初在SVG 1.2 Tiny中引入。这是SVG针对功率有限的移动设备的一个子集。 SVG 1.2没有标记,所以这个问题不是问题。

vector-effect是关于浏览器最终实现的唯一来自SVG 1.2的小东西。不幸的是,那个时候显然错过了这个问题,我想没人会把它当作一个bug报告。尽管我看到它在S.O.上被问到。先前。

好消息是,SVG2规范specifically notes it as something that should be addressed,虽然现在没有帮助你。

+0

谢谢你的抬头。我想我必须自己定位和调整它们。 – irundaia