在 SVG 中按比例缩小和居中形状答案

【问题标题】：Scale-In & Centre A Shape in SVG在 SVG 中按比例缩小和居中形状
【发布时间】：2017-07-19 20:08:57
【问题描述】：

我一直在努力形成在 SVG 中居中 svg 形状的逻辑。 viewBox 缩放功能很好，但是，我很难使用 viewBox 来使形状居中。

代码如下：

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

【问题讨论】：

我使用这种方法进行更多控制。将路径位置存储在数组中。将 SVG 中心平移值应用于路径元素。然后在您想要缩放时将每个位置乘以缩放值。然后将每个位置映射到中心位置。然后重绘它。

标签： javascript svg alignment viewbox

【解决方案1】：

如果您只是想将路径移动/缩放到 svg 的中心，请尝试以下操作：（注意：浏览器不处理 viewBox 和 svg 的宽度/高度相同，因此我通常对元素使用变换）

<!DOCTYPE html>
<html>

<body onload=fit()>
<div style=background:lime;width:600px;height;400px;>
	<svg width="600" height="400" >
		<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" />
	</svg>
</div>

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

【讨论】：

感谢 Francis，我实际上想将视图框移动到形状的中心，使其几乎填满屏幕（给定的填充是 1.25）。
我更改了答案以对其进行缩放并添加填充
感谢弗朗西斯，我设法解决了。我必须找到限制因素（在这种情况下是高度），找到它与宽度的关系并除以一半以进行居中。未测试您的代码但接受它，因为...您有一个 svg 徽标头像。 :!
svg logo头像... :)