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

Question

我已创建此svg以用于设置下拉列表的样式。

listview.setAdapter(adapter);

如您所见，线条颜色为<?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

我的问题是svg线颜色比选择的边框颜色亮得多。

这是OSX Sierra上Chrome的结果：

Answer 1

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

看起来您正在将SVG缩小到44像素左右，因此灰线最终的宽度为1 * 44/128 = 0.34。因此，抗锯齿将意味着它将在边界线的黑暗处获得大约三分之一。

你有很多解决方案，包括......

1. 让你的线条更暗以补偿。它可能需要＃444左右。
2. 或者让你的线更粗以补偿。大约是厚度的3倍。
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>