html - 防止svg路径溢出

Question

我有一个简单的 SVG 图像，里面有一条线:

<svg class="icon icon-person" width="25rem" height="25rem" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    path {
      stroke-width: 5 !important;
    }
  </style>
  <path d="M2.5 0 V 200"></path>
</svg>

它沿着 SVG 图像的左边框绘制一条简单的垂直线。我的 stroke-width 是常量，等于 5。

为了让 path 不溢出 SVG 图像区域，我必须将 path 起点 x 坐标设置为 2.5 是其宽度的 50%。然而，每当我在 SVG 图像的边缘附近绘制一些东西时，都会感到困惑。

所以我想的是将我所有的路径包装到一些 g 元素或其他东西中，将其大小设置为 195 x 195 并偏移它距离 SVG 图像的边缘 2.5 单位，然后指定其中所有路径相对于 g 元素的位置，而不必扣除边框的 50%宽度。

问题是 g 元素无法定位，所以我被卡住了任何帮助将不胜感激。

Answer 1

您可以转换一个组的内容。

<svg class="icon icon-person" width="25rem" height="25rem" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    path {
      stroke: black;
      stroke-width: 5 !important;
    }
  </style>
  <g transform="translate(2.5, 0)">
    <path d="M0 0 V 200"></path>
  </g>
</svg>