Question

可以用CSS改变SVG矩形的宽度吗？

这不起作用：

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

请参阅jsfiddle。

Answer 1

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

Answer 2

是的，它可能。创建一个带有矩形的svg文件，然后使用img标签将其导入到html中。

请参阅：link

Answer 3

我为你制作了一些SVG动画。请查看以下链接，其中显示了SVG Scaling和SVG element Movement等示例。如示例所示，您可以创建许多rec并根据需要为其设置动画。

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

如何用css更改svg rect的宽度

3 个答案: