我正在与 svg 矩阵战斗
我想要的是缩放对象的大小，而不是它的原点(在绘图中)，即。让它变小(或变大)但不要移动它
我有一个盒子 x=y=w=h=4 和另一个
X---####----####
----####----####
----####----####
----####----####
我想要 x=4=y=4 w=h=2
X---##------##
--------------
----##------##
--------------
无论我尝试什么，我都会得到(没有无用的东西)
h=y=w=h=2(即缩小一半)
X-##--##
--##--##
注意，我不知道“缩放”到一半大小的线的原点
我的数学并没有那么糟糕，但我的向量数学很小而且是很久以前的事情了
编辑: fiddle (哦，来晚了)
最佳答案
通常，缩放过程分为 4 个步骤:
第 1 步 - 通过边界框获取元素的中心
第 2 步 - 平移元素，使中心位于原点(0,0)
第 3 步 - 缩放
第 4 步 - 将元素平移回其原始位置
处理 SVG 矩阵和转换时，最好使用 矩阵转换请求对象并将要转换的元素附加到转换列表对象。最初，这可能不如使用转换字符串那么直观。即“翻译(-100，-200)规模(2,2)翻译(100,200)”
但是，从长远来看，它会对你有好处。
下面是对象驱动转换的示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='font-family:arial'>
<center>
(This example tested in: IE11/CH31/FF23)
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:8px;'>
Sequentially Transform an element about a fixed 'center point' in the element.
For this example, use the initial center of its bounding box.
</div>
<div id="svgDiv" style='background-color:lightblue;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400">
<rect id="myBox" fill="red" x=100 y=100 width=100 height=100 />
<circle id=centerPoint r=10 fill=lime />
</svg>
</div>
<button onClick=rotate()>rotate</button>
<button onClick=scaleXY()>scaleXY</button>
<button onClick=skewX()>skewX</button>
<button onClick=skewY()>skewY</button>
<button onClick=startOver()>start over</button>
<br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
</center>
</body>
<script>
document.addEventListener("onload",init(),false)
function init()
{
initTransform()
svgSourceValue.value=svgDiv.innerHTML
}
var Cx,Cy
var TransformRequestObj
var TransformList
//---onload---
function initTransform()
{
var bb=myBox.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
Cx=bbx+.5*bbw
Cy=bby+.5*bbh
centerPoint.setAttribute("cx",Cx)
centerPoint.setAttribute("cy",Cy)
SVGPnt=mySVG.createSVGPoint()
TransformRequestObj=mySVG.createSVGTransform()
var animTransformList=myBox.transform
TransformList=animTransformList.baseVal
}
//--button--
function rotate()
{
var angle=30
TransformRequestObj.setRotate(10,Cx,Cy)
TransformList.appendItem(TransformRequestObj)
TransformList.consolidate()
svgSourceValue.value=svgDiv.innerHTML
}
//---button---
function scaleXY()
{
var scaleX=1.05
var scaleY=1.05
TransformRequestObj.setTranslate(Cx,Cy)
TransformList.appendItem(TransformRequestObj)
TransformList.consolidate()
TransformRequestObj.setScale(scaleX,scaleY)
TransformList.appendItem(TransformRequestObj)
TransformList.consolidate()
TransformRequestObj.setTranslate(-Cx,-Cy)
TransformList.appendItem(TransformRequestObj)
TransformList.consolidate()
svgSourceValue.value=svgDiv.innerHTML
}
//---button---
function skewX()
{
var skwX=5 //---radians
TransformRequestObj.setTranslate(Cx,Cy)
TransformList.appendItem(TransformRequestObj)
TransformList.consolidate()
TransformRequestObj.setSkewX(skwX)
TransformList.appendItem(TransformRequestObj)
TransformList.consolidate()
TransformRequestObj.setTranslate(-Cx,-Cy)
TransformList.appendItem(TransformRequestObj)
TransformList.consolidate()
svgSourceValue.value=svgDiv.innerHTML
}
//---button---
function skewY()
{
var skwY=10 //---deg
TransformRequestObj.setTranslate(Cx,Cy)
TransformList.appendItem(TransformRequestObj)
TransformList.consolidate()
TransformRequestObj.setSkewY(skwY)
TransformList.appendItem(TransformRequestObj)
TransformList.consolidate()
TransformRequestObj.setTranslate(-Cx,-Cy)
TransformList.appendItem(TransformRequestObj)
TransformList.consolidate()
svgSourceValue.value=svgDiv.innerHTML
}
//---button---
function startOver()
{
myBox.removeAttribute("transform")
TransformRequestObj=mySVG.createSVGTransform()
var animTransformList=myBox.transform
TransformList=animTransformList.baseVal
}
</script>
</html>
关于matrix - 如何使用 svg 矩阵变换仅缩放而不平移(隐式)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21563321/