如何缩放SVG路径 | 如何缩放SVG路径

本文介绍了如何缩放SVG路径的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试缩放svg路径(如element).但是，缩放对于div元素而言工作正常，而不适用于svg path元素.我在下面附上了我的代码.有什么建议吗?

I have tried to scale the svg path like element. But scaling is working fine for div element not working for svg path element. I have attached my code below. Any suggestion?

<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>

推荐答案

您的代码已损坏.您无需添加<body>或<style>标签作为开始.特别是，似乎附加的<style>标记使.two类的语句无法解析.

Your code is rather broken. You don't need to add <body> or <style> tags for a start. In particular, it looks like the additional <style> tag has made the statements for the .two class impossible to parse.

另一个问题是border之类的CSS属性不适用于SVG元素.尝试改用stroke和/或stroke-width.

Another problem is that CSS attributes like border don't apply to SVG elements. Try using stroke and/or stroke-width instead.

也许主要的问题是您的SVG内容与原点之间的偏移量很大.当将其放大2倍时，基本上就是将所有坐标加倍.结果，该图形从SVG视图框的右下角消失了.解决此问题的最简单方法是使用<g>元素重新定位SVG原点.

Perhaps the main problem is that your SVG content is offset quite a long way from the origin. When you scale it up by a factor of 2, you're basically just doubling all the coordinates. As a result, the drawing is disappearing off the bottom right corner of the SVG view box. The simplest way to fix this is to use a <g> element to reposition the SVG origin.

这是一个简单的示例，其三角形位于SVG的中间:

Here's a simple example with a triangle centred in the middle of the 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>

这篇关于如何缩放SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！