如何缩放SVG路径

我试图缩放像元素的svg路径。但缩放对于div元素无法用于svg路径元素的情况正常工作。下面附上了我的代码。任何建议？如何缩放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>

来源

2016-12-22 Sanjith

也许你可以通过改变SVG视器扩展吗？例如。 http://jonibologna.com/svg-viewbox-and-viewport/#expandingviewport – ne1410s

您的代码，而破。您无需在开始时添加<body>或<style>标签。特别是，看起来额外的<style>标签使得.two类的声明无法解析。

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

也许主要的问题是你的SVG内容偏离了原点的很长一段距离。当您将其缩小2倍时，基本上只需加倍所有坐标。因此，绘图正在从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>

来源

2016-12-22 12:33:23

感谢您的建议。这在Chrome浏览器中正常工作。但在Internet Explorer中它不起作用。如何在IE中实现这一点？ – Sanjith

来自哪里110,110？ – JAT86

@ JAT86将坐标原点放置在viewBox的中心（宽度为220，高度为220）。这个三角形是以这个原点为中心的，所以当它的比例发生变化时，它的增长不会移动到任何地方。（'scale'变换将所有坐标乘以相同的数量，所以如果原点仍然在SVG画布的左上角，那么当它放大时，三角形会缩小到右下角。） –

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>

来源

2016-12-22 15:29:57

如何缩放SVG路径

回答

相关问题