スケールイン＆センタSVGのシェイプ

私はSVGでsvgシェイプを中心にするというロジックを形成するのに苦労しています。 viewBoxスケール機能は問題ありませんが、私はviewBoxを使って形状のセンタリングに苦労しています。ここでスケールイン＆センタSVGのシェイプ

Jsbin

コードです：

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

出典

2017-02-28 Kayote

私はこのアプローチをよりコントロールするために使用します。パスの位置を配列に格納します。パス要素にSVG center translate値を適用します。スケールしたいときは常に、スケール値ごとに複数の位置をそれぞれ指定します。次に、各位置を中心位置にマッピングします。それを再描画します。 – Adapter

あなたは自分のSVGの中心に移動/拡大縮小パスが次のことを試してみたい場合：（注意：ブラウザがビューボックスを処理しません。そしてSVGの幅/高さと同じ、従って私は、典型的には要素に変換を使用）

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

出典

2017-02-28 23:15:04

このFrancisのおかげで、私は実際にビューボックスを画面の中心に移動したいだけで、画面をほぼ満たしている（1.25はパディングです）。 – Kayote

私はそれをスケールアップし、詰め物を追加する答えを変更しました –

フランシスに感謝し、私はそれを解決しました。私は制限要因（この場合は高さ）を見つけなければならず、幅との関係を見つけ出し、センタリングのために半分に分けなければなりませんでした。あなたのコードはテストされていませんが、それを受け入れています...あなたはsvgのロゴアバターを持っています。：！ – Kayote

スケールイン＆センタSVGのシェイプ

答えて

関連する問題