reactjs - React Native SVG - 设置 SVG 宽度和高度会导致图标被截断

Question

我有一个 SVG 组件，我试图传递宽度和高度 Prop ，以便根据显示将我的所有图标缩放到相同的大小。

import React from "react";
import Svg, { G, Path } from "react-native-svg";

const GearIcon = props => {

  const {color = '#2672C9', height = 46, width = 46} = props;

  return (
    <Svg width={height} height={width}>
      <G fill="none" fillRule="evenodd">
        <Path
          d="M24.97 0h-4.84a3.423 3.423 0 0 0-3.419 3.419V5.36a17.93 17.93 0 0 0-2.39 1.013l-2.14-2.14a3.396 3.396 0 0 0-2.418-1.001c-.913 0-1.772.355-2.417 1L3.923 7.657a3.4 3.4 0 0 0-1.001 2.418 3.4 3.4 0 0 0 1 2.417l2.246 2.246c-.37.779-.684 1.585-.94 2.415h-1.81A3.422 3.422 0 0 0 0 20.569v4.841a3.422 3.422 0 0 0 3.418 3.418h2.11c.282.767.617 1.514 1.002 2.236L5.114 32.48a3.422 3.422 0 0 0 0 4.834l3.422 3.423a3.396 3.396 0 0 0 2.417 1c.914 0 1.771-.355 2.418-1l1.672-1.674c.686.312 1.39.58 2.108.803v2.254a3.423 3.423 0 0 0 3.419 3.419h4.84a3.422 3.422 0 0 0 3.418-3.419v-2.54a17.64 17.64 0 0 0 1.95-.857l1.702 1.703a3.397 3.397 0 0 0 2.418 1c.913 0 1.772-.355 2.417-1l3.423-3.423a3.4 3.4 0 0 0 1.001-2.417 3.4 3.4 0 0 0-1-2.417l-1.804-1.804c.305-.64.573-1.301.8-1.978h2.387a3.422 3.422 0 0 0 3.418-3.417V20.13a3.422 3.422 0 0 0-3.418-3.418h-2.388a17.944 17.944 0 0 0-.862-2.099l1.554-1.554a3.422 3.422 0 0 0 0-4.834l-3.422-3.423a3.398 3.398 0 0 0-2.417-1c-.914 0-1.772.355-2.418 1l-1.506 1.506a17.68 17.68 0 0 0-2.274-.949v-1.94A3.423 3.423 0 0 0 24.97 0m0 2.76c.365 0 .659.294.659.659v3.96c0 .03-.014.056-.017.085a15.314 15.314 0 0 1 5.56 2.334.654.654 0 0 1 .148-.244l2.802-2.8a.66.66 0 0 1 .93 0l3.423 3.423a.66.66 0 0 1 0 .931l-2.8 2.8a.647.647 0 0 1-.288.159 15.275 15.275 0 0 1 2.282 5.637.649.649 0 0 1 .492-.232h3.96c.364 0 .659.294.659.658v4.84a.658.658 0 0 1-.658.658h-3.96a.647.647 0 0 1-.493-.232 15.31 15.31 0 0 1-2.366 5.775.674.674 0 0 1 .224-.04c.166 0 .331.063.458.19l2.8 2.8a.659.659 0 0 1 0 .932l-3.421 3.421a.656.656 0 0 1-.932 0l-2.8-2.8a.642.642 0 0 1-.168-.59 15.287 15.287 0 0 1-5.72 2.522.648.648 0 0 1 .324.555v3.96a.658.658 0 0 1-.658.659h-4.84a.658.658 0 0 1-.659-.659v-3.96a.65.65 0 0 1 .172-.435A15.261 15.261 0 0 1 14.4 35.59a.643.643 0 0 1-.18.396l-2.8 2.8a.66.66 0 0 1-.931 0l-3.423-3.423a.66.66 0 0 1 0-.931l2.8-2.8a.653.653 0 0 1 .186-.123 15.307 15.307 0 0 1-2.483-5.479c-.061.019-.122.038-.189.038h-3.96a.658.658 0 0 1-.66-.658v-4.84c0-.364.296-.658.66-.658h3.96c.007 0 .014.003.02.003a15.28 15.28 0 0 1 2.328-5.872.639.639 0 0 1-.53-.181L5.875 10.54a.659.659 0 0 1 0-.932l3.422-3.422a.652.652 0 0 1 .466-.193c.168 0 .336.063.465.193l3.323 3.322c.12.12.179.276.186.434a15.31 15.31 0 0 1 5.752-2.478c-.004-.029-.018-.054-.018-.085V3.42c0-.365.296-.659.66-.659h4.84"
          fill={color}
        />
        <Path
          d="M28.52 22.54a5.98 5.98 0 1 1-11.96 0 5.98 5.98 0 0 1 11.96 0z"
          stroke={color}
          strokeWidth={3}
        />
      </G>
    </Svg>
  );

};

export default GearIcon;

当我将 41 和 41 作为 Prop 传递时，这会导致绘图本身被切断。



我不太了解 SVG 的工作原理，我该如何解决这个问题？

Answer 1

您需要定义 viewBox 属性。

这将定义 svg 中形状的“框架”，相对于您的坐标，然后将正确缩放。

在您的情况下，由于图像的正确大小为 46 x 46，您可以在 viewBox 中定义它 -viewBox="0 0 46 46" .

由于您目前没有定义 viewBox，它将占用 100% 的 SVG(相当于 viewBox="0 0 41 41")，这就是您看到图像被截断的原因。

 return (
    <Svg width={height} height={width} viewbox="0 0 46 46">
      <G fill="none" fillRule="evenodd">
        <Path
          d="M24.97 0h-4.84a3.423 3.423 0 0 0-3.419 3.419V5.36a17.93 17.93 0 0 0-2.39 1.013l-2.14-2.14a3.396 3.396 0 0 0-2.418-1.001c-.913 0-1.772.355-2.417 1L3.923 7.657a3.4 3.4 0 0 0-1.001 2.418 3.4 3.4 0 0 0 1 2.417l2.246 2.246c-.37.779-.684 1.585-.94 2.415h-1.81A3.422 3.422 0 0 0 0 20.569v4.841a3.422 3.422 0 0 0 3.418 3.418h2.11c.282.767.617 1.514 1.002 2.236L5.114 32.48a3.422 3.422 0 0 0 0 4.834l3.422 3.423a3.396 3.396 0 0 0 2.417 1c.914 0 1.771-.355 2.418-1l1.672-1.674c.686.312 1.39.58 2.108.803v2.254a3.423 3.423 0 0 0 3.419 3.419h4.84a3.422 3.422 0 0 0 3.418-3.419v-2.54a17.64 17.64 0 0 0 1.95-.857l1.702 1.703a3.397 3.397 0 0 0 2.418 1c.913 0 1.772-.355 2.417-1l3.423-3.423a3.4 3.4 0 0 0 1.001-2.417 3.4 3.4 0 0 0-1-2.417l-1.804-1.804c.305-.64.573-1.301.8-1.978h2.387a3.422 3.422 0 0 0 3.418-3.417V20.13a3.422 3.422 0 0 0-3.418-3.418h-2.388a17.944 17.944 0 0 0-.862-2.099l1.554-1.554a3.422 3.422 0 0 0 0-4.834l-3.422-3.423a3.398 3.398 0 0 0-2.417-1c-.914 0-1.772.355-2.418 1l-1.506 1.506a17.68 17.68 0 0 0-2.274-.949v-1.94A3.423 3.423 0 0 0 24.97 0m0 2.76c.365 0 .659.294.659.659v3.96c0 .03-.014.056-.017.085a15.314 15.314 0 0 1 5.56 2.334.654.654 0 0 1 .148-.244l2.802-2.8a.66.66 0 0 1 .93 0l3.423 3.423a.66.66 0 0 1 0 .931l-2.8 2.8a.647.647 0 0 1-.288.159 15.275 15.275 0 0 1 2.282 5.637.649.649 0 0 1 .492-.232h3.96c.364 0 .659.294.659.658v4.84a.658.658 0 0 1-.658.658h-3.96a.647.647 0 0 1-.493-.232 15.31 15.31 0 0 1-2.366 5.775.674.674 0 0 1 .224-.04c.166 0 .331.063.458.19l2.8 2.8a.659.659 0 0 1 0 .932l-3.421 3.421a.656.656 0 0 1-.932 0l-2.8-2.8a.642.642 0 0 1-.168-.59 15.287 15.287 0 0 1-5.72 2.522.648.648 0 0 1 .324.555v3.96a.658.658 0 0 1-.658.659h-4.84a.658.658 0 0 1-.659-.659v-3.96a.65.65 0 0 1 .172-.435A15.261 15.261 0 0 1 14.4 35.59a.643.643 0 0 1-.18.396l-2.8 2.8a.66.66 0 0 1-.931 0l-3.423-3.423a.66.66 0 0 1 0-.931l2.8-2.8a.653.653 0 0 1 .186-.123 15.307 15.307 0 0 1-2.483-5.479c-.061.019-.122.038-.189.038h-3.96a.658.658 0 0 1-.66-.658v-4.84c0-.364.296-.658.66-.658h3.96c.007 0 .014.003.02.003a15.28 15.28 0 0 1 2.328-5.872.639.639 0 0 1-.53-.181L5.875 10.54a.659.659 0 0 1 0-.932l3.422-3.422a.652.652 0 0 1 .466-.193c.168 0 .336.063.465.193l3.323 3.322c.12.12.179.276.186.434a15.31 15.31 0 0 1 5.752-2.478c-.004-.029-.018-.054-.018-.085V3.42c0-.365.296-.659.66-.659h4.84"
          fill={color}
        />
        <Path
          d="M28.52 22.54a5.98 5.98 0 1 1-11.96 0 5.98 5.98 0 0 1 11.96 0z"
          stroke={color}
          strokeWidth={3}
        />
      </G>
    </Svg>
  );

取决于 react-native-svg的版本您正在使用，您可能需要使用 viewbox而不是 viewBox .

您可以通过运行下面的代码片段进行测试(使用标准的 SVG 文件)

<svg width="41" height="41" version="1.1" viewBox="0 0 46 46" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" fillRule="evenodd">
	<path
	  d="M24.97 0h-4.84a3.423 3.423 0 0 0-3.419 3.419V5.36a17.93 17.93 0 0 0-2.39 1.013l-2.14-2.14a3.396 3.396 0 0 0-2.418-1.001c-.913 0-1.772.355-2.417 1L3.923 7.657a3.4 3.4 0 0 0-1.001 2.418 3.4 3.4 0 0 0 1 2.417l2.246 2.246c-.37.779-.684 1.585-.94 2.415h-1.81A3.422 3.422 0 0 0 0 20.569v4.841a3.422 3.422 0 0 0 3.418 3.418h2.11c.282.767.617 1.514 1.002 2.236L5.114 32.48a3.422 3.422 0 0 0 0 4.834l3.422 3.423a3.396 3.396 0 0 0 2.417 1c.914 0 1.771-.355 2.418-1l1.672-1.674c.686.312 1.39.58 2.108.803v2.254a3.423 3.423 0 0 0 3.419 3.419h4.84a3.422 3.422 0 0 0 3.418-3.419v-2.54a17.64 17.64 0 0 0 1.95-.857l1.702 1.703a3.397 3.397 0 0 0 2.418 1c.913 0 1.772-.355 2.417-1l3.423-3.423a3.4 3.4 0 0 0 1.001-2.417 3.4 3.4 0 0 0-1-2.417l-1.804-1.804c.305-.64.573-1.301.8-1.978h2.387a3.422 3.422 0 0 0 3.418-3.417V20.13a3.422 3.422 0 0 0-3.418-3.418h-2.388a17.944 17.944 0 0 0-.862-2.099l1.554-1.554a3.422 3.422 0 0 0 0-4.834l-3.422-3.423a3.398 3.398 0 0 0-2.417-1c-.914 0-1.772.355-2.418 1l-1.506 1.506a17.68 17.68 0 0 0-2.274-.949v-1.94A3.423 3.423 0 0 0 24.97 0m0 2.76c.365 0 .659.294.659.659v3.96c0 .03-.014.056-.017.085a15.314 15.314 0 0 1 5.56 2.334.654.654 0 0 1 .148-.244l2.802-2.8a.66.66 0 0 1 .93 0l3.423 3.423a.66.66 0 0 1 0 .931l-2.8 2.8a.647.647 0 0 1-.288.159 15.275 15.275 0 0 1 2.282 5.637.649.649 0 0 1 .492-.232h3.96c.364 0 .659.294.659.658v4.84a.658.658 0 0 1-.658.658h-3.96a.647.647 0 0 1-.493-.232 15.31 15.31 0 0 1-2.366 5.775.674.674 0 0 1 .224-.04c.166 0 .331.063.458.19l2.8 2.8a.659.659 0 0 1 0 .932l-3.421 3.421a.656.656 0 0 1-.932 0l-2.8-2.8a.642.642 0 0 1-.168-.59 15.287 15.287 0 0 1-5.72 2.522.648.648 0 0 1 .324.555v3.96a.658.658 0 0 1-.658.659h-4.84a.658.658 0 0 1-.659-.659v-3.96a.65.65 0 0 1 .172-.435A15.261 15.261 0 0 1 14.4 35.59a.643.643 0 0 1-.18.396l-2.8 2.8a.66.66 0 0 1-.931 0l-3.423-3.423a.66.66 0 0 1 0-.931l2.8-2.8a.653.653 0 0 1 .186-.123 15.307 15.307 0 0 1-2.483-5.479c-.061.019-.122.038-.189.038h-3.96a.658.658 0 0 1-.66-.658v-4.84c0-.364.296-.658.66-.658h3.96c.007 0 .014.003.02.003a15.28 15.28 0 0 1 2.328-5.872.639.639 0 0 1-.53-.181L5.875 10.54a.659.659 0 0 1 0-.932l3.422-3.422a.652.652 0 0 1 .466-.193c.168 0 .336.063.465.193l3.323 3.322c.12.12.179.276.186.434a15.31 15.31 0 0 1 5.752-2.478c-.004-.029-.018-.054-.018-.085V3.42c0-.365.296-.659.66-.659h4.84"
	  fill="black"
	/>
	<path
	  d="M28.52 22.54a5.98 5.98 0 1 1-11.96 0 5.98 5.98 0 0 1 11.96 0z"
	  stroke="black"
	  strokeWidth="3"
	/>
  </g>
</svg>

这是 viewBox 工作原理的有用图形表示