Question

我试图将svg路径缩放为元素。但是对于不适用于svg path元素的div元素，缩放工作正常。我在下面附上了我的代码。有什么建议吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您的代码相当破碎。您不需要添加<body>或<style>标记作为开始。特别是，看起来额外的<style>标记使得.two类的语句无法解析。

另一个问题是像border这样的CSS属性不适用于SVG元素。请尝试使用stroke和/或stroke-width。

也许主要的问题是你的SVG内容与原点相距很远。当你将它按比例缩放2倍时，你基本上只是将所有坐标加倍。结果，绘图从SVG视图框的右下角消失。解决此问题的最简单方法是使用<g>元素重新定位SVG原点。

这是一个简单的例子，其中三角形位于SVG的中间位置：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

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>

如何扩展SVG路径

2 个答案: