svg - 如何在路径转换后设置笔画宽度？

Question

我有一个格式为 SVG 的文件：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M0.0 0.0 L1.0 0.0 L1.0 1.0 L0.0 1.0 L0.0 0.0 Z" fill="none" transform="translate(276.53762663809374, 97.7838427947598) scale(177.52243125896803, -89.004366812227)" style="stroke: black; stroke-width: 0.5px;"></path>
</svg>

当我希望图像以 0.5 像素的边框显示时，图像会以巨大的黑色边框显示。如何在转换后应用笔画宽度？如果这不可能，那么包装元素以使其正确显示的最简单方法是什么？我想避免修改“d”属性。

Answer 1

你可以使用 vector-effect="non-scaling-stroke"

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path vector-effect="non-scaling-stroke" d="M0.0 0.0 L1.0 0.0 L1.0 1.0 L0.0 1.0 L0.0 0.0 Z" fill="none" transform="translate(276.53762663809374, 97.7838427947598) scale(177.52243125896803, -89.004366812227)" style="stroke: black; stroke-width: 0.5px;"></path>
</svg>

一个警告是 IE9/10 没有实现这一点，但 Webkit、Opera 和 Firefox 可以。