Scale-In & Center Eine Form in SVG

Ich habe Schwierigkeiten, die Logik der Zentrierung einer SVG-Form in SVG zu bilden. Die Skalenfunktion viewBox ist in Ordnung, aber ich habe Probleme mit der Zentrierung der Form mit viewBox. HierScale-In & Center Eine Form in SVG

Jsbin

ist der Code:

// SCALE & CENTRE THE TEMPLATE ON SCREEN 
const svg = document.getElementsByTagName("svg")[ 0 ]; 
const t = document.getElementsByClassName("templateParent")[ 0 ]; 
const svgRect = svg.getBoundingClientRect(), 
     svgW = svgRect.width, 
     svgH = svgRect.height, 
     svgX = svgRect.x, 
     svgY = svgRect.y; 
const aspectRatio = svgW/svgH; 
const tRect = t.getBBox(), 
     tW = tRect.width, 
     tH = tRect.height, 
     tX = tRect.x, 
     tY = tRect.y; 
const tmW = tW * 1.25, 
     tmH = tH * 1.25, 
     tmX = tX * 1.25, 
     tmY = tY * 1.25; 
const vbH = tmH, 
     vbW = tmW * aspectRatio, 
     vbX = tmX * aspectRatio, 
     vbY = tmY;

Quelle

2017-02-28 Kayote

Ich verwende diesen Ansatz für mehr Kontrolle. Speichern Sie Pfadpositionen in einem Array. Übernehmen Sie SVG-Zentrum übersetzen Wert zu Pfadelement. Dann multiplizieren Sie jede Position mit dem Skalierungswert, wann immer Sie skalieren möchten. Dann kartieren Sie jede Position auf die Mittelposition. dann zeichne es neu. – Adapter

Wenn Sie wollen einfach nur bewegen/skalieren Ihren Weg zum Zentrum der Ihr svg versuchen Sie Folgendes: (Hinweis: Browser behandeln nicht viewBox und SVG Breite/Höhe gleich, daher typischerweise I verwenden Transformationen auf die Elemente)

<!DOCTYPE html> 
 
<html> 
 

 
<body onload=fit()> 
 
<div style=background:lime;width:600px;height;400px;> 
 
\t <svg width="600" height="400" > 
 
\t \t <path id=myPath d="M329.66,99.99l22.1,4H238.43c-1.5-4.3,17.3-85.4,17.3-85.4c1.7-11-10.12-83.7-10.12-83.7l22.1-4 1.405 30.583 61.010 0 1.405 -30.583z" stroke="#bbb" stroke-width="1" vector-effect="non-scaling-stroke" fill="blue" /> 
 
\t </svg> 
 
</div> 
 

 
<script> 
 
//---onload--- 
 
function fit() 
 
{ 
 
\t var bb=myPath.getBBox() 
 
\t var bbx=bb.x 
 
\t var bby=bb.y 
 
\t var bbw=bb.width 
 
\t var bbh=bb.height 
 
\t //---center of path--- 
 
\t var cx=bbx+.5*bbw 
 
\t var cy=bby+.5*bbh 
 

 
//---Use min of width/height create scale: ratio of desired width vs current width-- 
 
var height=400-20 ///--ie padding=20 px-- 
 
var scale=height/bbh 
 
//---where to move it: center of svg--- 
 
var targetX=300 
 
var targetY=200 
 
//---move its center to target x,y --- 
 
var transX=(-cx)*scale + targetX 
 
var transY=(-cy)*scale + targetY 
 
    myPath.setAttribute("transform","translate("+transX+" "+transY+")scale("+scale+" "+scale+")") 
 
} 
 

 

 

 
</script> 
 
</body> 
 
</html>

Quelle

2017-02-28 23:15:04

Danke für diesen Francis, ich möchte eigentlich die Viewbox auf die Form zentrieren, gerade so, dass sie den Bildschirm praktisch füllt (1.25 ist die Polsterung gegeben). – Kayote

Ich änderte die Antwort, um es zu skalieren und Polsterung hinzuzufügen –

Dank Francis, ich schaffte es, es zu lösen. Ich musste den begrenzenden Faktor finden (in diesem Fall war die Höhe), finde seine Beziehung zur Breite und dividiere die Hälfte für die Zentrierung. Dein Code wurde nicht getestet, aber akzeptiert, weil ... du einen Svg-Logo-Avatar hast. :! – Kayote

Scale-In & Center Eine Form in SVG

Antwort

Verwandte Themen