如何使用 css 更改 svg rect 的宽度

Question

是否可以使用 CSS 更改 SVG 矩形的宽度？

这不起作用：

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

见jsfiddle。

Answer 1

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

见：link

Answer 2

我为你制作了一些 SVG 动画。检查下面的链接显示像SVG Scaling和SVG element Movement这样的例子。如示例所示，您可以创建许多 rec 并按照您想要的方式对其进行动画处理。

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

Answer 3

由于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)" 翻转坐标系（调整其他值以配合，例如负y 坐标位置）。

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