gpt4 book ai didi

svg - 调整 svg 组的路径

转载 作者:行者123 更新时间:2023-12-05 03:03:59 27 4
gpt4 key购买 nike

我想将路径大小调整为 20 像素左右。

SVG 的大小应为 500 * 500,现在路径宽度为 297,高度为 180.7。现在我需要这条路径,其宽度为 277,高度为 160.7,在之前的路径中。

<!DOCTYPE html>
<html>
<body>

<h1>Scale Paht Svg`**`enter code here`**`</h1>

<svg width="500" height="500">
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000000" d="M245.5,263.5l-148,179c0,0,287,4,297,0L245.5,263.5z"/>
</svg>

最佳答案

您需要像这样更改您的代码:SVG Canvas 是 500 单位/500 单位,因此您可以使用 viewBox 属性:viewBox="0 0 500 500"。不,您可以通过添加 width="20"y="20 将 SVG 的大小更改为 20/20。由于按比例缩小的笔划会非常细,因此您需要添加 vector- effect="non-scaling-stroke"。这样笔划就不会缩小。

svg{border:1px solid;}
<svg viewBox="0 0 500 500" width="20" y="20">
<path vector-effect="non-scaling-stroke" fill="none" stroke="#000000" d="M245.5,263.5l-148,179c0,0,287,4,297,0L245.5,263.5z"/>
</svg>

更新

如果您需要 SVG Canvas 为 500px/500px 但只有此路径为 20/20px 您可以使用 SVG 符号:

svg{border:1px solid;}
<svg viewBox="0 0 500 500">
<symbol id="triangle" viewBox="0 0 500 500">
<path vector-effect="non-scaling-stroke" fill="none" stroke="#000000" d="M245.5,263.5l-148,179c0,0,287,4,297,0L245.5,263.5z"/>
</symbol>
<use xlink:href="#triangle" width="20" height="20" />
</svg>

2 次更新

OP 评论:

SVG should be same size of 500 * 500, now the path width is 297 and height is 180.7. Now i need this path with width 277 and height 160.7 inside the previous path.

接下来是代码示例:Y 希望这就是您所需要的。

<svg width="500" height="500">
<symbol id="triangle" viewBox="97.5 263.5 297 180.78" >
<path id="test" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000000" d="M245.5,263.5l-148,179c0,0,287,4,297,0L245.5,263.5z"/>
</symbol>
<use xlink:href="#triangle"/>
<use xlink:href="#triangle" width="277" height="160.7" x="110.5" y="188.5"/>
</svg>

关于svg - 调整 svg 组的路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53334555/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com