我有一堆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属性,还是应该手动计算标记的大小?
答案 0 :(得分:1)
vector-effect="non-scaling-stroke
首先在SVG 1.2 Tiny中引入。这是用于功率有限的移动设备的SVG的子集。 SVG 1.2没有标记,所以这个问题不是问题。
vector-effect
是关于浏览器最终实现的SVG 1.2 Tiny的唯一内容。不幸的是,当时显然错过了这个问题,我想没有人会把它作为一个bug报告。虽然我已经看到它询问S.O.先前。
好消息是SVG2规范specifically notes it as something that should be addressed,虽然现在对你没有帮助。