我想将路径大小调整为 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 画布为 500 个单位 / 500 个单位，因此您可以使用 viewBox 属性：viewBox="0 0 500 500"。不，您可以通过添加将 SVG 的大小更改为 20/20 width="20" y="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 画布为 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> OP评论：
SVG 的尺寸应为 500 * 500，现在路径宽度为 297，高度为 180.7。现在我需要在前一条路径内这条宽度为 277、高度为 160.7 的路径。
接下来是一个代码示例：希望这是您所需要的。
<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> | 归档时间： |
|
| 查看次数： |
9671 次 |
| 最近记录： |