스케일 인 및 센터 SVG의 모양

나는 SVG에서 svg 모양을 중심으로하는 논리를 형성하는 데 어려움을 겪고 있습니다. viewBox 스케일 기능은 훌륭하지만, 나는 viewBox을 사용하여 모양을 중심에 맞추기 위해 고심합니다.스케일 인 및 센터 SVG의 모양

// 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의 센터로 경로를 확장하려면 : (참고 : 브라우저 뷰 박스를 처리하지 않는 다음

Jsbin

코드입니다 그리고 SVG 너비/높이 동일하므로 I는 전형적 변환 소자에 사용)

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

이 프란시스 주셔서 감사합니다. 사실 뷰 박스를 도형의 중심으로 옮기고 싶습니다. 사실상 스크린을 채우는 데 충분합니다 (1.25는 주어진 패딩입니다). – Kayote

나는 그것을 확장하고 대답 패딩을 추가했습니다. –

감사합니다. Francis, 나는 그것을 해결할 수있었습니다. 나는 제한 요소 (이 경우 높이)를 찾아야 만 폭과의 관계를 찾고 센터링을 위해 절반으로 나누어야했습니다. 코드를 테스트 한 것이 아니라 받아들이 기 때문에 ... 당신은 svg 로고 아바타를 가지고 있습니다. :! – Kayote

답변

관련 문제