如何在不改变svg属性的情况下，将svg路径拟合到一定的px大小？
如何在不改变svg属性的情况下，将svg路径拟合到一定的px大小？
提问于 2022-09-05 21:32:49
我是否可以通过更改该路径的属性来更改<path>的大小以适应特定的px大小？
我有一个带有胡萝卜<path>的SVG。
<svg height="600" width="400">
<path id="carrot" fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1
9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2
2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3
2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"/>
</svg>
目前，胡萝卜路径适合于50 of *50 of的平方。我想要使胡萝卜路径符合另一个px大小，例如，30 px*30 px的平方。
我从this question中找到了一个解决方案，可以修复到某个px大小的路径。它需要修改<svg>容器的属性。但是，除了这个<svg>之外，我的<path>还包括其他元素，我不想更改这些元素。因此，我不能修改<svg>的属性。
我可以控制<path>的<path>属性来缩放它，但是它只能按比例缩放它，而不是将<path>更改为特定的px。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-09-05 22:28:11
您可以嵌套<svg>元素。对于内部元素，甚至可以使用x和y属性来自由地定位路径。
<svg x="20" y="20" height="600" width="400">
<svg width="30" height="30" viewBox="0 0 50 50">
<path id="carrot" fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1
9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2
2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3
2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"/>
</svg>
</svg>
Stack Overflow用户
发布于 2022-09-06 00:57:40
您还可以将svg元素包装在支持基于元素的<symbol>属性中。
但是您还需要添加<use>元素，否则图形资产将不可见。
正如@ccprog已经说明的那样：
您需要为比例缩放定义一个合适的<viewBox> (防止任何图形裁剪)。
svg {
border: 1px solid red
}<h3>Original svg assets</h3>
<svg height="400" width="600">
<path id="carrot" fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
<path id="carrotLarge" fill="green" d="M 400 130 c -10 -30 -50 -40 -70 -20 h -10 l 10 -110 h -30 l -10 90 l -40 -70 l -30 10 l 50 80 l -80 -40 l -10 20 l 90 50 h -10 c -20 20 -30 50 -20 70 l 20 20 l 50 -30 l 10 20 l -50 30 l 80 90 l 50 -30 l 20 20 l -50 30 l 120 140 l 30 -20 l -80 -250 l -50 30 l -10 -20 l 50 -30 l -30 -80z" />
</svg>
<h3>Svg elements wrapped in symbols</h3>
<svg height="400" width="600">
<symbol id="symbolCarrot" viewBox="0 0 50 50">
<path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
</symbol>
<symbol id="symbolCarrotLarge" viewBox="100 0 500 500">
<path d="M 400 130 c -10 -30 -50 -40 -70 -20 h -10 l 10 -110 h -30 l -10 90 l -40 -70 l -30 10 l 50 80 l -80 -40 l -10 20 l 90 50 h -10 c -20 20 -30 50 -20 70 l 20 20 l 50 -30 l 10 20 l -50 30 l 80 90 l 50 -30 l 20 20 l -50 30 l 120 140 l 30 -20 l -80 -250 l -50 30 l -10 -20 l 50 -30 l -30 -80z" />
</symbol>
<use href="#symbolCarrot" width="50" height="50" fill="darkorange"></use>
<use href="#symbolCarrotLarge" width="500" height="500" x="100" fill="green"></use>
<use href="#symbolCarrotLarge" width="30" height="30" x="50" fill="red"></use>
</svg>
<h3>Resused svg assets – outside original svg</h3>
<svg height="30px" width="30px">
<use href="#symbolCarrot" fill="darkorange"></use>
</svg>
<svg height="50px" width="50px">
<use href="#symbolCarrot" fill="darkorange"></use>
</svg>
<svg height="30px" width="30px">
<use href="#symbolCarrotLarge" fill="green"></use>
</svg>
viewBox值需要使用用户单元:例如:胡萝卜路径的d属性适合于50x50单位的用户单位平方。
一旦viewBox适合，您就可以轻松地缩放您的svg图形到任何输出大小。
<symbol>元素最常见的用法可能是在原始svg元素之外创建可重用的svg资产。
大多数现代图标库(fontAwesome、羽毛图标等)都使用类似的概念。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73614837
复制相关文章
相似问题
腾讯云开发者
