blocks|key|837313|text|若要旋转，请使用transform="rotate(deg,+cx,+cy)"，其中deg是要旋转的度数，(cx，cy)定义旋转中心。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|837314|对于缩放/调整大小，您必须平移(-cx，-cy)，然后缩放，然后平移回(cx，cy)。您可以使用matrix+transform来实现这一点|837315|transform="matrix(sx,+0,+0,+sy,+cx-sx*cx,+cy-sy*cy)"|code-block|syntax|javascript|837316|其中sx是x轴上的比例因子，sy是y轴上的比例因子。|837317|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform^0|8|V|0|1C|G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

To rotate use <code>transform="rotate(deg, cx, cy)"</code>, where deg is the degree you want to rotate and (cx, cy) define the centre of rotation.

For scaling/resizing, you have to translate by (-cx, -cy), then scale and then translate back to (cx, cy). You can do this with a <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform" rel="noreferrer">matrix transform</a>:

<pre><code>transform="matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)"
</code></pre>

Where sx is the scaling factor in the x-axis, sy in the y-axis.

blocks|key|837554|text|svg+*+{+
++transform-box:+fill-box;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|837555|应用transform-box:+fill-box将使SVG中的元素表现为普通的HTML元素。然后，您可以像往常一样应用transform-origin:+center+(或其他东西|unstyled|offset|length|style|CODE|837556|没错，transform-box:+fill-box。如今，不再需要任何复杂的矩阵内容|837557|entityMap^0|0|2|N|1O|O|0|3|N|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@$G|Q|H|R|I|J]|$G|S|H|T|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@$G|V|H|W|I|J]]|9|@]|A|$]]|$1|M|3|-4|5|F|7|X|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>svg * { 
 transform-box: fill-box;
}
</code></pre>
applying <code>transform-box: fill-box</code> will make an element within an SVG behave as a normal HTML element. Then you can apply <code>transform-origin: center</code> (or something else) as you would normally
that's right, <code>transform-box: fill-box</code>. These days, there's no need for any complicated matrix stuff

blocks|key|837423|text|如果可以使用固定值(不是"center“或"50%25")，则可以使用CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|837424|-moz-transform-origin:+25px+25px;
-ms-transform-origin:++25px+25px;
-o-transform-origin:+25px+25px;
-webkit-transform-origin:++25px+25px;
transform-origin:+25px+25px;|code-block|syntax|javascript|837425|一些浏览器(如Firefox)不能正确处理相对值。|837426|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you can use a fixed value (not "center" or "50%"), you can use CSS instead:

<pre><code>-moz-transform-origin: 25px 25px;
-ms-transform-origin: 25px 25px;
-o-transform-origin: 25px 25px;
-webkit-transform-origin: 25px 25px;
transform-origin: 25px 25px;
</code></pre>

Some browsers (like Firefox) won't handle relative values correctly.

blocks|key|621471|text|如果你像我一样，想要使用transform-origin进行平移和缩放，你需要更多的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|621472|//+<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)+%2B+oX;
++var+y+=+scaleD+*+(currentY+-+oY)+%2B+oY;

++state.scale+=+scale;
++state.x+=+x;
++state.y+=+y;

++var+transform+=+"matrix("%2Bscale%2B",0,0,"%2Bscale%2B","%2Bx%2B","%2By%2B")";
++//var+transform+=+"translate("%2Bx%2B","%2By%2B")+scale("%2Bscale%2B")";+//same
++view.setAttributeNS(null,+"transform",+transform);
};|code-block|syntax|javascript|621473|下面是它的工作原理：http://forresto.github.io/dataflow-prototyping/react/|offset|length|621474|entityMap|0|LINK|mutability|MUTABLE|url|http://forresto.github.io/dataflow-prototyping/react/^0|0|0|A|1H|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

If you're like me and want to pan and then zoom with transform-origin, you'll need a little more.

<pre><code>// &lt;g id="view"&gt;&lt;/g&gt;
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);
};
</code></pre>

Here it is working: <a href="http://forresto.github.io/dataflow-prototyping/react/" rel="noreferrer">http://forresto.github.io/dataflow-prototyping/react/</a>

blocks|key|837481|text|为了在不使用matrix转换的情况下进行缩放：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|837482|transform="translate(cx,+cy)+scale(sx+sy)+translate(-cx,+-cy)"|code-block|syntax|javascript|837483|这是CSS中的代码：|837484|transform:+translate(cxpx,+cypx)+scale(sx,+sy)+translate(-cxpx,+-cypx)|837485|entityMap^0|6|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

For scaling without having to use the <code>matrix</code> transformation: 

<pre><code>transform="translate(cx, cy) scale(sx sy) translate(-cx, -cy)"
</code></pre>

And here it is in CSS:

<pre><code>transform: translate(cxpx, cypx) scale(sx, sy) translate(-cxpx, -cypx)
</code></pre>

blocks|key|621782|text|你可以围绕0,0原点构建任何你想要的东西，然后把它放到一个组<g></g>中，并对整个组进行矩阵转换。这样，对象将始终围绕0,0旋转，但整个组被移动(平移)到其他位置，并在旋转后应用平移矩阵。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|621783|​|621784|<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>|code-block|syntax|javascript|621785|621786|这将创建一个箭头(例如，对于仪表)，较宽的结束于0,0，并将其移动到160,200。无论对"arrow“类应用哪个旋转，都会将它旋转160,200左右。|621787|测试环境:+Chrome、Firefox、Opera、MS+Edge|621788|entityMap^0|U|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

You can build whatever you want around 0,0 origin, then put it into a group <code>&lt;g&gt;&lt;/g&gt;</code> and matrix-translate the whole group.
Like that, the object will always rotate around 0,0 , but the whole group is moved (translated) elsewhere and translation matrix is applied after the rotation.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;g transform="matrix(1 0 0 1 160 200)"&gt;
 &lt;polygon id="arrow-A" class="arrow" points="0,4 -90,0 0,-4 "/&gt;
&lt;/g&gt;


&lt;style&gt;

.arrow {
 transform: rotate(60deg);
}

/* OR */

#arrow-A {
 transform: rotate(60deg);
}

&lt;/style&gt;

OR scripting: 

&lt;script&gt; 
 document.getElementById("arrow-A").setAttribute("transform", "rotate(60)");
&lt;/script&gt;</code></pre>
</div>
</div>

This will create an arrow (eg. for a gauge), the broader end at [0,0] and move it to [160, 200]. Whichever rotation is applied to class &quot;arrow&quot;, will rotate it around [160, 200].
Tested in: Chrome, Firefox, Opera, MS Edge

blocks|key|837623|text|只要在DOM中设置嵌入元素的属性(transform-origin="center")就可以了|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|837624|++++++++++<circle
++++++++++fill="#FFFFFF"
++++++++++cx="82"
++++++++++cy="81.625"
++++++++++r="81.5"
++++++++++transform-origin="center"
++++++++></circle>|code-block|syntax|javascript|837625|可以很好地使用css转换|837626|entityMap^0|H|P|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Setting the attribute (<code>transform-origin=&quot;center&quot;</code>) of the embedded element just inside the DOM did the trick for me
<pre><code> &lt;circle
 fill=&quot;#FFFFFF&quot;
 cx=&quot;82&quot;
 cy=&quot;81.625&quot;
 r=&quot;81.5&quot;
 transform-origin=&quot;center&quot;
 &gt;&lt;/circle&gt;
</code></pre>
Works well with using css transforms

I need to resize and rotate certain elements in SVG document using javascript. The problem is, by default, it always applies the transform around the origin at <code>(0, 0)</code> – top left.

How can I re-define this transform anchor point?

I tried using the <code>transform-origin</code> attribute, but it does not affect anything. 

This is how I did it:

<pre><code>svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');
</code></pre>

It does not seem to set the pivotal point to the point I specified although I can see in Firefox that the attribute is correctly set. I tried things like <code>center bottom</code> and <code>50% 100%</code> with and without parenthesis. Nothing worked so far.

Can anyone help?

How to set transform origin in SVG

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我需要使用javascript调整和旋转SVG文档中的某些元素。问题是，默认情况下，它总是在(0, 0) -左上角的原点周围应用变换。我如何重新定义这个变换锚点？我尝试使用transform-origin属性，但它不会影响任何内容。我是这样做的：svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');它似乎没

问如何在SVG中设置变换原点
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在SVG中设置变换原点EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在SVG中设置变换原点
EN