过渡 CSS“变换”属性

【问题标题】：Transition CSS "transform" attribute过渡 CSS“变换”属性
【发布时间】：2014-10-19 04:58:06
【问题描述】：

如何设置以下属性转换的样式，而不是变成：

transform="translate(0,250)"

变成：

transform="translate(-45,250)"

使其将整个对象向左移动 -45 个像素。

下面是代码：

<svg width="365" height="250">
<g class="x_ticks_d3 plain" transform="translate(0,250)"></g>
</svg>

【问题讨论】：

设置属性样式是什么意思？抱歉，我就是不明白。
我想设置 transform="translate(-45,250)" 而不是现在的 transform="translate(0,250)"。我想选择 .x_ticks_d3 transform{attribute(-45,250)}

标签： html css sass

【解决方案1】：

如果我们谈论“造型”，你可以做某事。像这样使用 CSS：

g.x_ticks_d3.plain {
    -moz-transform: translateX(-45px);
    -webkit-transform: translateX(-45px);
    -o-transform: translateX(-45px);
    -ms-transform: translateX(-45px);
    transform: translateX(-45px);
}

但这不会改变 svg 翻译，而且 svg 中的 250 可能并不总是匹配像素（记住可缩放矢量的东西）。

更有希望的方法是使用 jQuery 操作属性：

$("g").attr("transform", "translate(-45,250)");

【讨论】：

非常感谢，你让我开心，在 coffe 脚本中处理这个问题时遇到了很多麻烦。