如何将SVG路径向右移动? [英] How to move the SVG path to the right?

问题描述

如图所示，六边形中的字母 V 未对齐，如何获得正确匹配的路径?

As seen in this image, the letter V in the hexagon is not aligned, how do I get the path that fits correctly?

图片:

const IconLogo = () => (
  <svg id="logo" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
    <title>Logo</title>
    <g transform="translate(-8.000000, -2.000000)">
      <g transform="translate(11.000000, 5.000000)">
     
        <path
           d="M 41.406 0 L 49.805 0 A 95.806 95.806 0 0 0 48.848 2.194 A 105.56 105.56 0 0 0 48.711 2.52 Q 48.164 3.828 47.52 5.488 Q 46.918 7.038 46.197 8.997 A 303.495 303.495 0 0 0 46.094 9.277 A 187.455 187.455 0 0 0 45.48 10.976 Q 45.213 11.726 44.927 12.546 A 326.876 326.876 0 0 0 44.336 14.258 L 29.297 57.031 L 20.508 57.031 L 5.273 14.258 A 2285.455 2285.455 0 0 1 4.433 11.928 Q 4.052 10.867 3.715 9.929 A 1245.896 1245.896 0 0 1 3.496 9.316 A 389.2 389.2 0 0 0 2.812 7.419 Q 2.488 6.528 2.193 5.733 A 231.072 231.072 0 0 0 2.109 5.508 A 283.371 283.371 0 0 0 1.585 4.109 Q 1.343 3.469 1.122 2.895 A 167.042 167.042 0 0 0 0.977 2.52 A 3326.428 3326.428 0 0 1 0.237 0.612 A 2951.562 2951.562 0 0 1 0 0 L 8.398 0 L 24.883 49.414 L 41.406 0 Z"
          fill="currentColor"
        />
        <polygon
          id="Shape"
          stroke="currentColor"
          strokeWidth="8"
          strokeLinecap="round"
          strokeLinejoin="round"
          points="39 0 0 22 0 67 39 90 78 68 78 23"
        />
      </g>
    </g>
  </svg>
);

export default IconLogo;

推荐答案

向第一个路径添加变换以移动它，例如

Add a transform to the first path to move it e.g.

svg {
    background-color: black;
    width: 100px;
    height: 100px;
    color: red;
    stroke-width: 8px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

<svg id="logo" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
    <title>Logo</title>
    <g transform="translate(-8.000000, -2.000000)">
      <g transform="translate(11.000000, 5.000000)">
        <path transform="translate(14.000000, 23.000000)"
           d="M 41.406 0 L 49.805 0 A 95.806 95.806 0 0 0 48.848 2.194 A 105.56 105.56 0 0 0 48.711 2.52 Q 48.164 3.828 47.52 5.488 Q 46.918 7.038 46.197 8.997 A 303.495 303.495 0 0 0 46.094 9.277 A 187.455 187.455 0 0 0 45.48 10.976 Q 45.213 11.726 44.927 12.546 A 326.876 326.876 0 0 0 44.336 14.258 L 29.297 57.031 L 20.508 57.031 L 5.273 14.258 A 2285.455 2285.455 0 0 1 4.433 11.928 Q 4.052 10.867 3.715 9.929 A 1245.896 1245.896 0 0 1 3.496 9.316 A 389.2 389.2 0 0 0 2.812 7.419 Q 2.488 6.528 2.193 5.733 A 231.072 231.072 0 0 0 2.109 5.508 A 283.371 283.371 0 0 0 1.585 4.109 Q 1.343 3.469 1.122 2.895 A 167.042 167.042 0 0 0 0.977 2.52 A 3326.428 3326.428 0 0 1 0.237 0.612 A 2951.562 2951.562 0 0 1 0 0 L 8.398 0 L 24.883 49.414 L 41.406 0 Z"
          fill="currentColor"
        />
        <polygon
          id="Shape"
          fill="none"
          stroke="currentColor"
          strokeWidth="8"
          strokeLinecap="round"
          strokeLinejoin="round"
          points="39 0 0 22 0 67 39 90 78 68 78 23"
        />
      </g>
    </g>
  </svg>

这篇关于如何将SVG路径向右移动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！