如何缩放SVG路径

Question

如何缩放SVG路径

25

我尝试缩放SVG路径元素，但是它能够对于div元素正常运作，对于SVG路径元素则不起作用。下面是我的代码，请给予建议？

<style>
    .two {
        transition: all 2s ease-in-out 0.5s;
        -webkit-transition: all 2s ease-in-out 0.5s;
    }
    
    #scale {
        height: 150px;
        width: 100px;
        text-align: center;
        margin: 0 auto;
    }
    
    #scale {
        border: 1px blue solid;
    }
    
    .grow:hover {
        transform: scale(2.0);
        -ms-transform: scale(2.0);
        -webkit-transform: scale(2.0);
    }
</style>

<body>
    <svg width="1350" height="900">
        <path d="M 673 248.625 A 67.875 67.875 0 0 1 740.1841400272543 326.159552463664 L 673 316.5 A 0 0 1 0 0 673 316.5 z" id="scale" class="two grow"></path>
    </svg>
</body>

- Sanjith

1

也许您可以通过更改SVG视口来实现缩放？例如：http://jonibologna.com/svg-viewbox-and-viewport/#expandingviewport - ne1410s

2个回答

5

SVG元素会朝向或远离原点进行缩放。默认情况下，原点是SVG的左上角。

如果您想让形状围绕中心点进行缩放，则可以使用transform-origin来设置新的原点。

请参见下面的演示。

<style>
    .two {
        transition: all 2s ease-in-out 0.5s;
        -webkit-transition: all 2s ease-in-out 0.5s;
    }
    
    #scale {
        height: 150px;
        width: 100px;
        text-align: center;
        margin: 0 auto;
    }
    
    #scale {
        border: 1px blue solid;
    }
    
    .grow:hover {
        transform-origin: 707px 287px;
        transform: scale(2.0);
        -ms-transform: scale(2.0);
        -webkit-transform: scale(2.0);
    }
</style>

<body>
    <svg width="1350" height="900">
        <path d="M 673 248.625 A 67.875 67.875 0 0 1 740.1841400272543 326.159552463664 L 673 316.5 A 0 0 1 0 0 673 316.5 z" id="scale" class="two grow"></path>
    </svg>
</body>

- Paul LeBeau

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

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

- r3mainer · Accepted Answer

你的代码出了很多问题。首先，你不需要添加 <body> 或者 <style> 标签。特别地，额外的 <style> 标签导致了对 .two 类的语句无法解析。

另一个问题是 CSS 属性例如 border 不适用于 SVG 元素。尝试使用 stroke 和/或者 stroke-width 替代。

也许主要的问题是你的 SVG 内容距离原点有很远的偏移量。当你将它放大两倍时，实际上只是将所有坐标翻倍。因此，绘图会消失在 SVG 视窗的右下角。最简单的修复方法是使用 <g> 元素来重新定位 SVG 原点。

下面是一个简单的例子，其中包含一个三角形在 SVG 中间居中：

.two {
  transition: all 2s ease-in-out 0.5s;
  -webkit-transition: all 2s ease-in-out 0.5s;
}
#scale {
  height: 150px;
  width: 100px;
  text-align: center;
  margin: 0 auto;
}
#scale {
  fill: yellow;
  stroke: blue;
  stroke-width: 2px;
}
.grow:hover {
  transform: scale(2.0);
  -ms-transform: scale(2.0);
  -webkit-transform: scale(2.0);
}

<svg width="220" height="220">
  <g transform="translate(110,110)">
    <path d="M0 -43.3 50 43.3 -50 43.3Z"
          id="scale" class="two grow" />
  </g>
</svg>