首页 > 解决方案 > SVG 水平线太大

问题描述

我尝试使用 html/svg 绘制形状。这是一个音量控制,见下文

<svg height="20" width="90" style="background-color: #ccc;">
    <g>
        <rect x="10" y="0" width="80" height="20" style="stroke: #000; stroke-width: 1; fill: #fff;"></rect>
        <!-- Example two of four -->
        <polygon points="10,20 50,10 50,20" style="fill: rgba(128,128,128,128)"></polygon>

        <line x1="30" y1="0" x2="30" y2="20" style="stroke: #000; stroke-width: 1;"></line>
        <line x1="50" y1="0" x2="50" y2="20" style="stroke: #000; stroke-width: 1;"></line>
        <line x1="70" y1="0" x2="70" y2="20" style="stroke: #000; stroke-width: 1;"></line>
    </g>
</svg>

所有浏览器都绘制双倍宽度的水平线,除了最后一个。我什至添加了“stroke-width: 1”,但这不起作用。

我猜抗锯齿?我怎样才能解决这个问题?

标签: svg

解决方案


推荐阅读