SVG 形状内的图像溢出笔划答案

【问题标题】：Image overflows stroke inside SVG shapeSVG 形状内的图像溢出笔划
【发布时间】：2021-04-10 09:53:22
【问题描述】：

在我的 React 应用程序中，我希望能够裁剪图像并将其嵌入到六边形 SVG 形状中以用作头像。我已经完成了裁剪部分并制作了 SVG 边框，我遇到的一个问题是嵌入的图片将边框溢出了大约一半，我希望该边框完全可见。这是我的代码：

export const HexagonFrame = ({ logo }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="63.191"
      height="69.06"
      viewBox="0 0 63.191 69.06"
    >
      <defs>
        <clipPath id="shape">
          <path
            id="hex"
            d="M4.2,34.351c.161-3.452.08-6.825.482-10.277A13.043,13.043,0,0,1,11.025,14.2c4.416-2.81,8.993-5.379,13.489-8.029,4.978-2.971,9.956-2.81,14.854.08C43.382,8.659,47.4,11.068,51.412,13.4c4.737,2.81,7.547,6.9,7.708,12.445.161,6.182.08,12.445-.241,18.627a12.05,12.05,0,0,1-5.54,9.474c-5.058,3.292-10.277,6.423-15.577,9.394a12.22,12.22,0,0,1-12.285-.08c-4.9-2.73-9.635-5.62-14.372-8.591-4.577-2.89-6.664-7.226-6.825-12.525-.08-2.569,0-5.138,0-7.788Z"
            transform="translate(-0.01 0.042)"
            fill="none"
            stroke="#fff"
            strokeMiterlimit="10"
            strokeWidth="8"
            strokeOpacity="1"
          />
        </clipPath>
      </defs>
      <use xlinkHref="#hex" />
      {logo && (
        <image
          width="63.191"
          height="69.06"
          clipPath="url(#shape)"
          xlinkHref={logo}
          id="logo"
        />
      )}
    </svg>
  );
};

还有我正在使用的六边形的屏幕截图。如您所见，边框被里面的图片溢出了

【问题讨论】：

标签： javascript html css reactjs svg

【解决方案1】：

您必须将笔画放在图像前面。

SVG 笔划位于定义它们的路径的中间。所以如果你只是改变顺序，部分图像会被笔画遮住。为避免这种情况，您需要重新定位（4px，笔划宽度的一半）并调整图像大小（8px，笔划的全宽）。像这样：

export const HexagonFrame = ({ logo }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="63.191"
      height="69.06"
      viewBox="0 0 63.191 69.06"
    >
      <defs>
        <clipPath id="shape">
          <path
            id="hex"
            d="M4.2,34.351c.161-3.452.08-6.825.482-10.277A13.043,13.043,0,0,1,11.025,14.2c4.416-2.81,8.993-5.379,13.489-8.029,4.978-2.971,9.956-2.81,14.854.08C43.382,8.659,47.4,11.068,51.412,13.4c4.737,2.81,7.547,6.9,7.708,12.445.161,6.182.08,12.445-.241,18.627a12.05,12.05,0,0,1-5.54,9.474c-5.058,3.292-10.277,6.423-15.577,9.394a12.22,12.22,0,0,1-12.285-.08c-4.9-2.73-9.635-5.62-14.372-8.591-4.577-2.89-6.664-7.226-6.825-12.525-.08-2.569,0-5.138,0-7.788Z"
            transform="translate(-0.01 0.042)"
            fill="none"
            stroke="#fff"
            strokeMiterlimit="10"
            strokeWidth="8"
            strokeOpacity="1"
          />
        </clipPath>
      </defs>
      {logo && (
        <image
          x="4"
          y="4"
          width="55.191"
          height="61.06"
          clipPath="url(#shape)"
          xlinkHref={logo}
          id="logo"
        />
      )}
      <use xlinkHref="#hex" />
    </svg>
  );
};

【讨论】：