如何用css改变svg矩形的宽度

这不起作用：

#red { 
    width: 800px; 
} 
#red:hover { 
    width: 1600px; 
}

见jsfiddle。

来源

2014-02-28 l00per

是的，你可以做，检查这个例子..http：//blog.studio.gd/blog/id/10/how_to_style_svg_with_css_-__part_2-3 –

谢谢，与规模它可以工作，但位置不正确：http://jsfiddle.net/fJLCg/17/ – l00per

是的，它是可能的。用矩形制作一个svg文件，然后用img标签将它导入到你的html中。

参见：link

来源

2014-02-28 07:58:10 garyry

好吧，但是如果我有30个矩形，我必须创建30个SVG文件并导入到我的html中作为img标签？有没有其他解决方案可以用ID来转换大小？ – l00per

您将制作单个svg并使用 30次。 –

我做了一些SVG动画为您服务。检查下面的链接显示的例子，如SVG Scaling和SVG element Movement。如示例所示，您可以创建多个rec并按照您的需要制作动画。

检查更新演示。 http://jsfiddle.net/kheema/CasPj/11/

来源

2014-02-28 08:50:42

此解决方案适合您吗？ –

看起来不错，但它应该改变高度或像这样的矩形：http://jsfiddle.net/fJLCg/17/ – l00per

好吧，你想这样吗？请检查更新的小提琴链接。 http://jsfiddle.net/kheema/CasPj/11/ –

由于width css属性尚未适用于<rect>元素，因此您无法在您的问题中进行此操作。

但是，您可以通过使用依赖于其他CSS属性的单位使其工作。

这样，SVG：

<rect id="red" width="1em" fill="red" height="270" />

和CSS：

#red { 
    font-size: 800px; 
} 
#red:hover { 
    font-size: 1600px; 
}

见jsfiddle。

要回答的后续问题，“你是怎么做到这一点，如果你想在相反的方向生长的高度（或宽度）？”，这里有一个方法：

翻转使用transform="scale(1,-1)"坐标系（调整其他值与此一致，例如负坐标位置）。

<rect id="red" y="-515.5" width="270" height="2em" transform="scale(1,-1)"/>

和CSS：

#red:hover {  
    animation: scaleheight 1s ease-in-out infinite alternate; 
} 

@keyframes scaleheight { 
    0% { 
     fill:red; 
    } 
    100% { 
     fill:blue; 
     font-size: 300px; 
    } 
}

见jsfiddle。

来源

2014-02-28 09:18:10

哦，这看起来不错:)可以改变“高度” - 底部到顶部以及？ – l00per

不确定你的意思。 –

对不起;）我的意思是，它可能从下到上扩展吗？像这样，但在另一个方向？ HTTP：//的jsfiddle。net/uH6j5/3/ – l00per

如何用css改变svg矩形的宽度

回答

相关问题