过渡CSS＆＃34;转换＆＃34;属性

Question

如何设置以下属性变换的样式，使其不是变为：

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>

Answer 1

如果我们谈论＆＃34;造型＆＃34;你可以做某事像这样用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)");