svg 线条颜色与 css 边框颜色不匹配

Question

我创建了这个 svg 用于设置下拉菜单的样式。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g>
    <line x1="10" y1="10" x2="10" y2="117" stroke-width="1" stroke="#ccc"/>
    <path fill="#00305e" d="M95.0603,45.0773l1.9872,2.025c1.9246,1.9611,1.906,5.1078-0.0415,7.0461L68.0522,82.9645
        c-1.9507,1.9414-5.1035,1.9414-7.0542,0L32.0442,54.1483c-1.9475-1.9383-1.9661-5.0849-0.0415-7.0461l1.9872-2.025
        c1.947-1.984,5.1386-1.9991,7.1042-0.0334l23.431,23.431l23.431-23.431C89.9218,43.0782,93.1133,43.0933,95.0603,45.0773z"/>
</g>
</svg>

如您所见，线条颜色为 #ccc。我已将下拉菜单设置为以下样式：

select {
    border: 1px solid #ccc;
}

我的问题是 svg 线条颜色比 select.

的边框颜色亮得多

这是 Chrome 在 OSX Sierra 上的结果：

Answer 1

问题是您的 SVG 正在缩小。您的 SVG 中的灰线宽度为一个单位，不一定等于 1 个像素。

您似乎正在将 SVG 缩小到 44 像素左右，因此灰线的宽度为 1 * 44/128 = 0.34。所以抗锯齿意味着它会在边界线的三分之一处绘制。

您有多种解决方案，包括...

让你的线条更暗以补偿。它可能需要#444 左右。
或者让你的线条更粗来补偿。大约是厚度的 3 倍。
或者使用vector-effect: non-scaling-stroke;，这样线宽就不会缩放

svg {
  width: 44px;
  border: solid 1px #ccc;
  border-left: none;
}

line {
  vector-effect: non-scaling-stroke;
}

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g>
    <line x1="10" y1="10" x2="10" y2="117" stroke-width="1" stroke="#ccc"/>
    <path fill="#00305e" d="M95.0603,45.0773l1.9872,2.025c1.9246,1.9611,1.906,5.1078-0.0415,7.0461L68.0522,82.9645
        c-1.9507,1.9414-5.1035,1.9414-7.0542,0L32.0442,54.1483c-1.9475-1.9383-1.9661-5.0849-0.0415-7.0461l1.9872-2.025
        c1.947-1.984,5.1386-1.9991,7.1042-0.0334l23.431,23.431l23.431-23.431C89.9218,43.0782,93.1133,43.0933,95.0603,45.0773z"/>
</g>
</svg>

svg 线条颜色与 css 边框颜色不匹配

svg line color does not match css border color

css

svg

colors

vector-graphics