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}的50％宽度。但是，每当我在SVG图像的边缘附近绘制某些东西时，都会感到困惑。

所以我认为将我的所有路径都包含在某个g元素或其他内容中，将其大小设置为195 x 195并将其偏移2.5个单位SVG图像的边缘，然后指定其中相对于g元素的所有路径的位置，而不必扣除边界宽度的50％。

问题是g元素无法定位，所以我被卡住任何帮助都会受到赞赏。

Answer 1

您可以transform群组内容。

<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>

防止svg路径溢出

1 个答案: