使用CSS对SVG中的<g>元素进行动画处理

亚当·斯科特

在SVG中<g class="building">,我想在悬停时向上移动。

    <svg x="0px" y="0px"
         viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
   <g class="building">
    <rect id="XMLID_1_" x="128.6" y="296.2"/>
 </g>
    </svg>

如果the是a <div class="building">,那么我将使用的CSS将是:

.building {
position: relative;
top: -20px;
}

由于position并且top在SVG中不起作用,因此我显然将不得不采用另一种方式

我如何向上移动20<g class="building">像素?

这是一个小提琴

罗伯特·朗森

您可以使用CSS转换来移动它。请注意,因为您已经为g和rect定义了相同的类,所以您可能需要重新考虑一下。

	.building{fill:#72B62B;stroke:#000000;stroke-miterlimit:10;}
	.ground{fill:#030203;stroke:#000000;stroke-miterlimit:10;}
  
  .building:hover {
    transform: translateY(-30px);
  }
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<g class="building">
<rect id="XMLID_2_" x="21.6" y="645" class="building" width="550" height="74.3"/>
</g>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

是否可以在StackLayout中对元素进行动画处理?

来自分类Dev

在Swift中使用CoreAnimation对UILabel元素进行动画处理

来自分类Dev

使用jQuery进行动画处理然后隐藏元素

来自分类Dev

使用jQuery对数组元素进行动画处理

来自分类Dev

悬停时对SVG进行动画处理

来自分类Dev

在CSS中以偏斜角度对偏斜的元素进行动画处理

来自分类Dev

使用霓虹灯元素对光dom元素进行动画处理

来自分类Dev

在IE11中使用CSS对SVG路径进行动画处理

来自分类Dev

在JQuery中对变量进行动画处理

来自分类Dev

在Python中对图像进行动画处理

来自分类Dev

在UITableViewCell中对UILabel进行动画处理

来自分类Dev

在GridView中对单元进行动画处理

来自分类Dev

在UITableViewCell中对UITableView进行动画处理

来自分类Dev

使用键盘对UIView进行动画处理

来自分类Dev

使用Jquery对徽标进行动画处理

来自分类Dev

通过CSS过渡对SVG直线进行动画处理

来自分类Dev

Angular / CSS-动态添加新元素时对内容进行动画处理

来自分类Dev

CSS / JS:更改文本后对内联元素进行动画处理

来自分类Dev

在MapKit中沿弧线对视觉元素进行动画处理

来自分类Dev

仅对ng-repeat中的第一个元素进行动画处理

来自分类Dev

如何在XAML中多次对元素的宽度进行动画处理?

来自分类Dev

使用AngularJS对整个应用程序进行动画处理,而不是讨论特定元素

来自分类Dev

SVG动画G元素

来自分类Dev

动画SVG在页面加载之前不会进行动画处理

来自分类Dev

使用变换原点对SVG圆进行动画处理

来自分类Dev

使用Web动画对DOM属性(scrollTop)进行动画处理

来自分类Dev

如何使用R的动画包对散点图进行动画处理?

来自分类Dev

在jQuery中对带前缀的CSS规则进行动画处理

来自分类Dev

仅使用CSS对箭头进行动画处理

Related 相关文章

  1. 1

    是否可以在StackLayout中对元素进行动画处理?

  2. 2

    在Swift中使用CoreAnimation对UILabel元素进行动画处理

  3. 3

    使用jQuery进行动画处理然后隐藏元素

  4. 4

    使用jQuery对数组元素进行动画处理

  5. 5

    悬停时对SVG进行动画处理

  6. 6

    在CSS中以偏斜角度对偏斜的元素进行动画处理

  7. 7

    使用霓虹灯元素对光dom元素进行动画处理

  8. 8

    在IE11中使用CSS对SVG路径进行动画处理

  9. 9

    在JQuery中对变量进行动画处理

  10. 10

    在Python中对图像进行动画处理

  11. 11

    在UITableViewCell中对UILabel进行动画处理

  12. 12

    在GridView中对单元进行动画处理

  13. 13

    在UITableViewCell中对UITableView进行动画处理

  14. 14

    使用键盘对UIView进行动画处理

  15. 15

    使用Jquery对徽标进行动画处理

  16. 16

    通过CSS过渡对SVG直线进行动画处理

  17. 17

    Angular / CSS-动态添加新元素时对内容进行动画处理

  18. 18

    CSS / JS:更改文本后对内联元素进行动画处理

  19. 19

    在MapKit中沿弧线对视觉元素进行动画处理

  20. 20

    仅对ng-repeat中的第一个元素进行动画处理

  21. 21

    如何在XAML中多次对元素的宽度进行动画处理?

  22. 22

    使用AngularJS对整个应用程序进行动画处理,而不是讨论特定元素

  23. 23

    SVG动画G元素

  24. 24

    动画SVG在页面加载之前不会进行动画处理

  25. 25

    使用变换原点对SVG圆进行动画处理

  26. 26

    使用Web动画对DOM属性(scrollTop)进行动画处理

  27. 27

    如何使用R的动画包对散点图进行动画处理?

  28. 28

    在jQuery中对带前缀的CSS规则进行动画处理

  29. 29

    仅使用CSS对箭头进行动画处理

热门标签

归档