Drehen SVG, ohne das Bild misplacing

Question

Ich habe dieses svg "Code"

<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> 

sein ein Gefäß mit einem Pfeil nach innen.

Ich versuche dieses "Bild" zu drehen, (ich muss es auf 360 Grad drehen).

Wenn ich rotate(0 10 17) zu rotate(90 10 17) ändere, wird es abgeschnitten. Das ist, weil ich es nicht von der Mitte des Bildes rotiere.

Ich habe versucht, diese Formel mit dem Zentrum zu berechnen, aber ich verwalten konnte es selbst nicht mit den Mathe/svg Probleme

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)); 

Ich bin wirklich schlecht zu tun, ich hoffe jemand kann mir helfen kann.

Dank

Answer 1

Das Rotationszentrum ist korrekt. Aber das Problem ist jetzt, dass es gedreht wird, Ihre Grafik ist nicht mehr 20x34, es ist 34x20.

Das erste, was Sie tun müssen, ist die Breite und Höhe zu aktualisieren.

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

Das ist nicht die endgültige Lösung ist natürlich, weil das Zentrum dieser neuen SVG 34x20 an einem anderen Ort zum Zentrum des alten 20x34 ist. Eine Lösung bestünde darin, ein anderes Rotationszentrum auszuarbeiten, das so funktioniert, dass die Grafik im neuen Rechteck in die richtige Position gedreht wird.

Das ist ein bisschen schwierig. Glücklicherweise gibt es einen viel einfacheren Weg. Wir können dem SVG einfach eine viewBox hinzufügen, um dem Browser die Abmessungen des Bereichs mitzuteilen, den das gedrehte Symbol einnimmt. Der Browser wird es für uns neu positionieren.

Die vier Werte in einem viewBox Attribut sind:

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

Wir wissen bereits, die Breite und Höhe (34 und 20), so brauchen wir nur die linken und oberen coords zu erarbeiten. Diese sind offensichtlich nur das Zentrum der Rotation weniger die Hälfte der Breite und Höhe.

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

Also das ViewBox-Attribut muss "-7 7 34 20" sein.

<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>

aktualisieren

Wenn Sie beliebige Winkel tun müssen, dann ist es eine bessere Methode, mit Javascript.

1. Nehmen der
2. Anruf getBBox() auf der SVG zu den Pfaden wandeln die Dimensionen seines Inhalts zu erhalten.
3. diese Werte Verwenden Sie die viewBox und die width und ‚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>