我需要使用JavaScript调整SVG文档中某些元素的大小和旋转。问题是，默认情况下它总是在原点(0,0)——左上角周围应用变换。
如何重新定义此变换锚点？
我尝试使用transform-origin属性，但它没有影响任何内容。
这是我的做法:
svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');
尽管我可以在Firefox中看到属性被正确设置，但它似乎没有将关键点设置为我指定的点。我尝试了center bottom和50% 100%等不同的方式，有些加括号，有些不加。目前为止都没用。
有人能帮忙吗？
要进行旋转，请使用 transform="rotate(deg, cx, cy)"，其中 deg 是您想要旋转的角度，(cx, cy) 定义了旋转中心。
对于缩放/调整大小，您必须先按 (-cx, -cy) 进行平移，然后进行缩放，最后再平移回 (cx, cy)。您可以使用 矩阵变换 来完成这个过程：
transform="matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)"
其中sx是x轴上的缩放因子，sy是y轴上的缩放因子。
translate 时，矩阵会变成这样 transform="matrix(sx, 0, 0, sy, tx+cx-sx*cx, ty+cy-sy*cy)"？ - thednpsvg * {
transform-box: fill-box;
}
应用transform-box: fill-box将使SVG内的元素表现为普通的HTML元素。然后，您可以像平常一样应用transform-origin: center（或其他内容）
没错，就是transform-box: fill-box。现在，不需要任何复杂的矩阵操作了。
transform-box: fill-box;，你可以以一种合理的方式使SVG元素遵守transform-origin，就像你所期望的那样！ - zfogg-moz-transform-origin: 25px 25px;
-ms-transform-origin: 25px 25px;
-o-transform-origin: 25px 25px;
-webkit-transform-origin: 25px 25px;
transform-origin: 25px 25px;
一些浏览器（例如Firefox）无法正确处理相对值。
element.setAttribute('transform-origin', '25px 25px') 这样的吗？ - nikk wong如果不想使用matrix变换来进行缩放：
transform="translate(cx, cy) scale(sx sy) translate(-cx, -cy)"
以下是 CSS 代码：
transform: translate(cxpx, cypx) scale(sx, sy) translate(-cxpx, -cypx)
如果您和我一样想要使用transform-origin来进行平移和缩放，那么您需要更多的帮助。
// <g id="view"></g>
var view = document.getElementById("view");
var state = {
x: 0,
y: 0,
scale: 1
};
// Origin of transform, set to mouse position or pinch center
var oX = window.innerWidth/2;
var oY = window.innerHeight/2;
var changeScale = function (scale) {
// Limit the scale here if you want
// Zoom and pan transform-origin equivalent
var scaleD = scale / state.scale;
var currentX = state.x;
var currentY = state.y;
// The magic
var x = scaleD * (currentX - oX) + oX;
var y = scaleD * (currentY - oY) + oY;
state.scale = scale;
state.x = x;
state.y = y;
var transform = "matrix("+scale+",0,0,"+scale+","+x+","+y+")";
//var transform = "translate("+x+","+y+") scale("+scale+")"; //same
view.setAttributeNS(null, "transform", transform);
};
这里是它的工作示例：http://forresto.github.io/dataflow-prototyping/react/
getElementById中的 id 与文档中的id="..."属性相匹配。不看代码很难确定问题所在。如果您不想将其发布为 SO 问题，可以尝试使用属性名称创建最简单的示例，直到它正常工作/找到问题，然后再将其余部分添加回去。 - NuclearPeon对于我来说，在DOM中设置嵌入元素的属性（transform-origin="center"）就解决了问题。
<circle
fill="#FFFFFF"
cx="82"
cy="81.625"
r="81.5"
transform-origin="center"
></circle>
使用CSS变换效果非常好
transform-origin="center"），而不是（transform-origin: center）。已在所有现代浏览器中进行测试，而且无需使用fill-box即可正常工作。 - unx我遇到了类似的问题。但是我使用D3来定位我的元素，并希望transform和transition由CSS处理。这是我的原始代码，在Chrome 65中可以工作：
//...
this.layerGroups.selectAll('.dot')
.data(data)
.enter()
.append('circle')
.attr('transform-origin', (d,i)=> `${valueScale(d.value) * Math.sin( sliceSize * i)}
${valueScale(d.value) * Math.cos( sliceSize * i + Math.PI)}`)
//... etc (set the cx, cy and r below) ...
这使我能够在javascript中使用相同的数据设置cx、cy和transform-origin值。
但是这在Firefox中不起作用！我所要做的是将circle包装在g标签中，并使用上面相同的定位公式来translate它。然后，我将circle附加到g标签中，并将其cx和cy值设置为0。从那里开始，transform：scale（2）将按预期从中心缩放。最终代码如下。
this.layerGroups.selectAll('.dot')
.data(data)
.enter()
.append('g')
.attrs({
class: d => `dot ${d.metric}`,
transform: (d,i) => `translate(${valueScale(d.value) * Math.sin( sliceSize * i)} ${valueScale(d.value) * Math.cos( sliceSize * i + Math.PI)})`
})
.append('circle')
.attrs({
r: this.opts.dotRadius,
cx: 0,
cy: 0,
})
circle 而不是 .dot，来添加 transform: scale(2)。我甚至都不需要使用 transform-origin。d3-selection-multi。这使我可以将一个对象传递给 .attrs，而不是为每个属性重复使用 .attr。
2. 当使用字符串模板时，请注意换行符，如第一个示例所示。这将在输出中包含一个换行符，并可能破坏您的代码。svg:transform-origin.enabled偏好设置后，它确实起作用了。但是...那似乎不是一个充分的解决方案。我还发现了transform-origin: 50% 50%和transform-origin: center center之间存在差异。 - Jamie S<g></g>中，并矩阵平移整个组。
这样，对象将始终围绕0,0旋转，但整个组被移动（平移）到其他地方，并且平移矩阵是在旋转之后应用的。
<g transform="matrix(1 0 0 1 160 200)">
<polygon id="arrow-A" class="arrow" points="0,4 -90,0 0,-4 "/>
</g>
<style>
.arrow {
transform: rotate(60deg);
}
/* OR */
#arrow-A {
transform: rotate(60deg);
}
</style>
OR scripting:
<script>
document.getElementById("arrow-A").setAttribute("transform", "rotate(60)");
</script>