回しSVG画像

Question

をなくすことなく、私は、このSVG「コード」

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="34"> 

<path transform="rotate(0 10 17)" fill="#6699FF" d="M 0.06,25.03 C 0.06,25.03 4.06,20.97 4.06,20.97 4.06,20.97 3.97,5.06 3.97,5.06 3.97,5.06 9.94,0.03 9.94,0.03 9.94,0.03 15.78,5.09 15.78,5.09 15.78,5.09 16.03,21.06 16.03,21.06 16.03,21.06 19.94,25.00 19.94,25.00 19.94,25.00 19.97,30.09 19.97,30.09 19.97,30.09 10.06,20.97 10.06,20.97 10.06,20.97 10.05,23.00 10.05,23.00 10.05,23.00 19.91,32.03 19.91,32.03 19.91,32.03 19.94,33.97 19.94,33.97 19.94,33.97 17.97,33.97 17.97,33.97 17.97,33.97 10.03,26.94 10.03,26.94 10.03,26.94 10.05,29.01 10.05,29.01 10.05,29.01 15.94,34.00 15.94,34.00 15.94,34.00 12.00,33.94 12.00,33.94 12.00,33.94 10.00,32.00 10.00,32.00 10.00,32.00 8.00,34.03 8.00,34.03 8.00,34.03 4.00,34.00 4.00,34.00 4.00,34.00 9.97,29.01 9.97,29.01 9.97,29.01 9.97,26.94 9.97,26.94 9.97,26.94 2.00,33.96 2.00,33.96 2.00,33.96 0.00,33.98 0.00,33.98 0.00,33.98 0.02,32.00 0.02,32.00 0.02,32.00 9.96,23.00 9.96,23.00 9.96,23.00 9.95,20.98 9.95,20.98 9.95,20.98 0.00,30.00 0.00,30.00 0.00,30.00 0.06,25.03 0.06,25.03 Z" /> 

<path transform="rotate(0 10 17) translate(0 0)" fill="white" d="M 8.04,17.04 C 8.04,17.04 7.98,11.04 7.98,11.04 7.98,11.04 5.00,11.00 5.00,11.00 5.00,11.00 10.00,6.04 10.00,6.04 10.00,6.04 14.96,11.02 14.96,11.02 14.96,11.02 12.02,11.04 12.02,11.04 12.02,11.04 12.02,17.04 12.02,17.04 12.02,17.04 8.04,17.04 8.04,17.04 Z" /> 

</svg> 

その内側に矢印付きの容器を持っています。

私はこの "画像"を回転しようとしています（360度回転する必要があります）。

rotate(0 10 17)をrotate(90 10 17)に変更すると切り捨てられます。それは私がイメージの中心から回転させないためです。

私はセンターを計算し、この計算式を使用してみましたが、私はそれを行うために管理することができなかった自分が

x = 34; y = 20; o = 4.71238898 //(degrees to radiants) ; 
a = Math.abs(x * Math.sin(o)) + Math.abs(y * Math.cos(o)); 
b = Math.abs(x * Math.cos(o)) + Math.abs(y * Math.sin(o)); 

私は、誰かが私を助けることができます期待しています、それらの数学/ SVGの問題には本当に悪いです。

ありがとうございました

Answer 1

回転中心が正しいです。しかし、問題は回転していて、あなたのグラフィックは20x34ではなく、34x20です。

まず、幅と高さを更新するだけです。この新しい34x20のSVGの中心は古い20x34 1の中央に別の場所にあるので、当然の最終的な解決策ではありません

<svg xmlns="http://www.w3.org/2000/svg" width="34" height="20"> 

。 1つの解決策は、新しい矩形内の正しい位置にグラフィックを回転させるように動作する別の回転中心を求めることです。

これは少しトリッキーです。幸運にも、もっと簡単な方法があります。 viewBoxをSVGに追加するだけで、回転したシンボルが占める領域のサイズをブラウザに伝えることができます。ブラウザがそれを元に戻します。 viewBox属性で

4値は次のとおりです。

<leftX> <topY> <width> <height> 

我々はすでに、幅と高さ（34及び20）を知っているので、私たちは左とトップCOORDSをうまくする必要があります。これらは明らかに幅と高さの半分以下の回転中心です。

leftX = 10 - (newWidth/2) 
     = 10 - 17 
     = -7 
topY = 17 - (newHeight/2) 
     = 17 - 10 
     = 7 

したがって、viewBox属性は"-7 7 34 20"である必要があります。

<svg xmlns="http://www.w3.org/2000/svg" width="34" height="20" viewBox="-7 7 34 20"> 
 

 
<path transform="rotate(90 10 17)" fill="#6699FF" d="M 0.06,25.03 C 0.06,25.03 4.06,20.97 4.06,20.97 4.06,20.97 3.97,5.06 3.97,5.06 3.97,5.06 9.94,0.03 9.94,0.03 9.94,0.03 15.78,5.09 15.78,5.09 15.78,5.09 16.03,21.06 16.03,21.06 16.03,21.06 19.94,25.00 19.94,25.00 19.94,25.00 19.97,30.09 19.97,30.09 19.97,30.09 10.06,20.97 10.06,20.97 10.06,20.97 10.05,23.00 10.05,23.00 10.05,23.00 19.91,32.03 19.91,32.03 19.91,32.03 19.94,33.97 19.94,33.97 19.94,33.97 17.97,33.97 17.97,33.97 17.97,33.97 10.03,26.94 10.03,26.94 10.03,26.94 10.05,29.01 10.05,29.01 10.05,29.01 15.94,34.00 15.94,34.00 15.94,34.00 12.00,33.94 12.00,33.94 12.00,33.94 10.00,32.00 10.00,32.00 10.00,32.00 8.00,34.03 8.00,34.03 8.00,34.03 4.00,34.00 4.00,34.00 4.00,34.00 9.97,29.01 9.97,29.01 9.97,29.01 9.97,26.94 9.97,26.94 9.97,26.94 2.00,33.96 2.00,33.96 2.00,33.96 0.00,33.98 0.00,33.98 0.00,33.98 0.02,32.00 0.02,32.00 0.02,32.00 9.96,23.00 9.96,23.00 9.96,23.00 9.95,20.98 9.95,20.98 9.95,20.98 0.00,30.00 0.00,30.00 0.00,30.00 0.06,25.03 0.06,25.03 Z" /> 
 

 
<path transform="rotate(90 10 17) translate(0 0)" fill="white" d="M 8.04,17.04 C 8.04,17.04 7.98,11.04 7.98,11.04 7.98,11.04 5.00,11.00 5.00,11.00 5.00,11.00 10.00,6.04 10.00,6.04 10.00,6.04 14.96,11.02 14.96,11.02 14.96,11.02 12.02,11.04 12.02,11.04 12.02,11.04 12.02,17.04 12.02,17.04 12.02,17.04 8.04,17.04 8.04,17.04 Z" /> 
 

 
</svg>

更新

あなたが任意の角度を行う必要がある場合には、Javascriptを使用して、より良い方法があります。

1. そのコンテンツの寸法を取得するためのSVGのパスに変換
2. コールgetBBox()を適用します。
3. はviewBoxとwidthと「height`

var angle = 145; // degrees 
 

 
var mysvg = document.getElementById("mysvg"); 
 
var paths = mysvg.getElementsByTagName("path"); 
 

 
// Apply a transform attribute to each path 
 
for (var i=0; i<paths.length; i++) { 
 
    paths[i].setAttribute("transform", "rotate("+angle+",10,17)"); 
 
} 
 

 
// Now that the paths have been rotated, get the bounding box 
 
// of the SVG contents 
 
var bbox = mysvg.getBBox(); 
 

 
// Update the viewBox from the bounds 
 
mysvg.setAttribute("viewBox", bbox.x + " " + bbox.y + " " + 
 
           bbox.width +" "+ bbox.height); 
 
// Update the width and height 
 
mysvg.setAttribute("width", bbox.width + "px"); 
 
mysvg.setAttribute("height", bbox.height + "px");

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" width="20" height="34"> 
 

 
<path fill="#6699FF" d="M 0.06,25.03 C 0.06,25.03 4.06,20.97 4.06,20.97 4.06,20.97 3.97,5.06 3.97,5.06 3.97,5.06 9.94,0.03 9.94,0.03 9.94,0.03 15.78,5.09 15.78,5.09 15.78,5.09 16.03,21.06 16.03,21.06 16.03,21.06 19.94,25.00 19.94,25.00 19.94,25.00 19.97,30.09 19.97,30.09 19.97,30.09 10.06,20.97 10.06,20.97 10.06,20.97 10.05,23.00 10.05,23.00 10.05,23.00 19.91,32.03 19.91,32.03 19.91,32.03 19.94,33.97 19.94,33.97 19.94,33.97 17.97,33.97 17.97,33.97 17.97,33.97 10.03,26.94 10.03,26.94 10.03,26.94 10.05,29.01 10.05,29.01 10.05,29.01 15.94,34.00 15.94,34.00 15.94,34.00 12.00,33.94 12.00,33.94 12.00,33.94 10.00,32.00 10.00,32.00 10.00,32.00 8.00,34.03 8.00,34.03 8.00,34.03 4.00,34.00 4.00,34.00 4.00,34.00 9.97,29.01 9.97,29.01 9.97,29.01 9.97,26.94 9.97,26.94 9.97,26.94 2.00,33.96 2.00,33.96 2.00,33.96 0.00,33.98 0.00,33.98 0.00,33.98 0.02,32.00 0.02,32.00 0.02,32.00 9.96,23.00 9.96,23.00 9.96,23.00 9.95,20.98 9.95,20.98 9.95,20.98 0.00,30.00 0.00,30.00 0.00,30.00 0.06,25.03 0.06,25.03 Z" /> 
 

 
<path fill="white" d="M 8.04,17.04 C 8.04,17.04 7.98,11.04 7.98,11.04 7.98,11.04 5.00,11.00 5.00,11.00 5.00,11.00 10.00,6.04 10.00,6.04 10.00,6.04 14.96,11.02 14.96,11.02 14.96,11.02 12.02,11.04 12.02,11.04 12.02,11.04 12.02,17.04 12.02,17.04 12.02,17.04 8.04,17.04 8.04,17.04 Z" /> 
 

 
</svg>