SVG Skalierung in Javascript

Ich bin ziemlich neu in SVG und ich bin fest, wie man eine Form in einem SVG-Element skalieren.SVG Skalierung in Javascript

Kann mir jemand erklären, warum das Folgende nicht funktioniert? Ich möchte den Kreis um 50% vergrößern.

Hier ist mein Beispiel mit dem Beispiel, das den Kreis nicht skaliert?

https://jsfiddle.net/q2buo2x7/

<svg height="150" width="150" id="outer"> 
    <circle id="inner" cx="25" cy="20" r="20" fill="orange"/> 
</svg> 

<script> 
    function zoom() { 
     var outer = document.getElementById('outer'); 
     outer.setAttribute("currentScale", 1.5); 
    } 
    zoom(); 
</script>

Quelle

2015-06-22 user3284707

Bitte sehen Sie diese gründliche Antwort: http://StackOverflow.com/Questions/19484707/How-Cani-Imake-an-SVG-Scale-With-ITs-Parent-Container – kaaposc

Sie möchten vielleicht eine der akzeptieren die Antworten, die dir am meisten geholfen haben. Dies hilft der Community, sich besser auf Fragen mit nicht akzeptierten Antworten zu konzentrieren. – RBT

Sie können die Top-Level-svg Objekt nicht skalieren. Um dies zu tun, müssen Sie die ViewBox ändern.

Woher haben Sie die Idee, currentScale als Attribut zu verwenden?

den Kreis skalieren Sie müssen ihre transform Attribut ändern:

<svg height="150" width="150" id="outer"> 
    <circle id="inner" cx="25" cy="20" r="20" fill="orange"/> 
</svg> 

<script> 
    function zoom() { 
     var circle = document.getElementById('inner'); 
     circle.setAttribute("transform", "scale(1.5)"); 
    } 
    zoom(); 
</script>

mehr lesen: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

Quelle

2015-06-22 20:08:42 Brennan

Ich habe vor kurzem meine HTML5 CSS und JavaScript Prüfung nicht bestanden und das war eine Frage, auf der ich nicht sicher war. Ich kann mich nicht an die exakten erinnern, aber ich erinnere mich an currentScale war auf einer der Antworten. Ich denke, das war nicht die richtige Antwort. – user3284707

Ich erinnere mich an eine, die die innere.r = inner.r * 1.5 hatte, habe ich dies versucht und dies auch nicht funktioniert, so dass ich ein wenig ratlos war. – user3284707

http://samples.msdn.microsoft.com/workshop/samples/svg/zoomAndPan/zooming.html versuchen Sie dieses Beispiel mit IE und mit Chrom, Sie werden sehen, dass es nur mit IE funktioniert. Dies verwendet die currentScale auf SVG-Ebene. – Tito

Es hängt davon ab, was Sie unter „den Kreis vergrößern“ bedeuten. Sie können eine Transformation gemäß Brennans Antwort anwenden. Das wird bis alles über den Kreis, wie seine Strichgröße skalieren, füllen usw.

Oder Sie können einfach den Radius des Kreises erhöhen, wenn das alles was Sie brauchen:

function zoom() { 
 
    var inner = document.getElementById('inner'); 
 
    inner.r.baseVal.value *= 1.5; 
 
} 
 
zoom();

<svg height="150" width="150" id="outer"> 
 
    <circle id="inner" cx="25" cy="20" r="20" fill="orange"/> 
 
</svg>

Quelle

2015-06-23 05:59:23

function zoomIn1() { 
     var outer = document.getElementById("outer"); 
     outer.setAttribute("currentScale", 1.5); 
    } 
    function zoomIn2() { 
     var outer = document.getElementById("outer"); 
     outer.currentScale = 1.5; 
    } 
    function zoomIn3() { // Correct way 
     var inner = document.getElementById("inner"); 
     inner.setAttribute("transform", "scale(1.5)"); 
    }

In IE zoomIn1 funktionieren zoomIn2 und zoomIn3.

In Chrome zoomIn1 wird nichts tun, zoomIn2 wird die ganze Seite zoomen und zoomIn3 wird tun, was Sie wollen. Für Ihre Microsoft-Prüfung ist Ihre Antwort korrekt, aber in Echt-Live: Verwenden Sie das transform-Attribut wie in zoomIn3 angegeben.

Quelle

2015-11-11 22:18:14 hvk

SVG Skalierung in Javascript

Antwort

Verwandte Themen