4

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

这不起作用：

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

见jsfiddle。

4

3 回答 3

12

由于widthcss 属性（尚未）适用于<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。

于 2014-02-28T09:18:10.750 回答
0

我为你制作了一些 SVG 动画。检查下面的链接显示像SVG Scaling和这样的例子SVG element Movement。如示例所示，您可以创建许多rec并以您想要的方式为它们设置动画。

检查更新演示。http://jsfiddle.net/kheema/Cas​​Pj/11/

于 2014-02-28T08:50:42.880 回答
-1

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

见：链接

于 2014-02-28T07:58:10.640 回答