调整SVG组的路径大小

Question

调整SVG组的路径大小

4

我想将路径大小调整约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>

- Vasantha Kumar Boddu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enxaneta · Accepted Answer

你需要将代码更改为以下内容： SVG画布的大小为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画布为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>

第二次更新

原帖评论如下：

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>