Question

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

Answer 1

您需要像这样更改代码： 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>

2次更新

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>

SVG组的大小调整路径

1 个答案:

2次更新