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中心转换值应用于路径元素。然后，每当您想要缩放时，按比例值将多个每个位置相关联。然后将每个位置映射到中心位置。然后重新绘制它。 – 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

感谢这个弗朗西斯，我实际上希望将视框移动到形状的中心，刚好足以让它实际上填充屏幕（1.25是填充给定的）。 – Kayote

我改变了答案的规模和添加填充 –

谢谢弗朗西斯，我设法解决它。我必须找到限制因素（在这种情况下是高度），找到它与宽度的关系，并将其与对中关系分开一半。没有测试过你的代码，但接受它，因为...你有一个svg徽标头像。！ – Kayote

SVG中的缩放与中心形状

回答

相关问题