React Native SVG - 设置SVG宽高导致图标被截断
React Native SVG - Setting SVG width and height cause the icon to be cut off
我有一个 SVG 组件，我正在尝试传递宽度和高度属性，以便根据显示器将我的所有图标缩放到相同的大小。
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 作为道具传递时，这会导致绘图本身被截断。
我不太了解 SVG 的工作原理，我该如何解决这个问题？
您需要定义 viewBox 属性。
这将在 svg 中定义 "frame" 相对于您的坐标的形状，然后将正确缩放。
在您的情况下，由于图像的正确尺寸为 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 工作原理的有用图形表示
我有一个 SVG 组件，我正在尝试传递宽度和高度属性，以便根据显示器将我的所有图标缩放到相同的大小。
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 作为道具传递时，这会导致绘图本身被截断。
我不太了解 SVG 的工作原理，我该如何解决这个问题？
您需要定义 viewBox 属性。
这将在 svg 中定义 "frame" 相对于您的坐标的形状，然后将正确缩放。
在您的情况下，由于图像的正确尺寸为 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 工作原理的有用图形表示