Matrix 如何使用svg矩阵变换仅缩放而不平移（隐式）？_Matrix_Svg

Matrix 如何使用svg矩阵变换仅缩放而不平移（隐式）？

matrix svg

Matrix 如何使用svg矩阵变换仅缩放而不平移（隐式）？,matrix,svg,Matrix,Svg,我正在与svg矩阵作斗争我想要的是缩放一个对象的大小，而不是它的原点（在图纸中），即使它变小（或变大），但不要移动它我有一个x=y=w=h=4的盒子和另一个盒子 X---####----#### ----####----#### ----####----#### ----####----#### 我想要x=4=y=4 w=h=2 X---##------## -------------- ----##------## -------------- 无论我尝试过什么，我都能得到（没有无用的

我正在与svg矩阵作斗争

我想要的是缩放一个对象的大小，而不是它的原点（在图纸中），即使它变小（或变大），但不要移动它

我有一个x=y=w=h=4的盒子和另一个盒子

X---####----####
----####----####
----####----####
----####----####

我想要x=4=y=4 w=h=2

X---##------##
--------------
----##------##
--------------

无论我尝试过什么，我都能得到（没有无用的东西）

h=y=w=h=2（即半刻度）

注意，我不知道“缩放”到一半大小的线的原点

我的数学没那么差，但我的向量数学很小，而且是很久以前的了

编辑：小提琴 （哦，太晚了）

通常，缩放是一个4步过程：

步骤1-通过元素的边界框获取元素的中心

步骤2-平移元素，使中心位于原点（0,0）

第3步-缩放它

步骤4-将元素平移回其原始位置

在处理SVG矩阵和变换时，最好使用 矩阵变换请求对象并将要变换的元素附加到变换列表对象。最初，这可能不像使用变换字符串那样直观。i、翻译（-100，-200）刻度（2,2）翻译（100200）

然而，从长远来看，它会很好地为你服务

下面是一个对象驱动变换的示例

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


（该示例在IE11/CH31/FF23中测试）
围绕元素中的固定“中心点”顺序变换元素。
对于本例，请使用其边界框的初始中心。
旋转
鳞状
斯克克斯
歪斜的
重新开始

SVG源代码：

document.addEventListener（“onload”，init（），false）
函数init（）
{
initTransform（）
svgSourceValue.value=svgDiv.innerHTML
}
变量Cx，Cy
var TransformRequestObj
变量转换列表
//---装载---
函数initTransform（）
{
var bb=myBox.getBBox（）
变量bbx=bb.x
变量bby=bb.y
var bbw=bb.width
var bbh=bb.高度
Cx=bbx+0.5*bbw
Cy=bby+0.5*bbh
centerPoint.setAttribute（“cx”，cx）
centerPoint.setAttribute（“cy”，cy）
SVGPnt=mySVG.createSVGPoint（）
TransformRequestObj=mySVG.createSVGTransform（）
var animTransformList=myBox.transform
TransformList=animTransformList.baseVal
}
//--钮扣--
函数rotate（）
{
可变角度=30
TransformRequestObj.setRotate（10，Cx，Cy）
TransformList.appendItem（TransformRequestObj）
TransformList.consolidate（）文件
svgSourceValue.value=svgDiv.innerHTML
}
//---钮扣---
函数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
}
//---钮扣---
函数skewX（）
{
var skwX=5/---弧度
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
}
//---钮扣---
函数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
}
//---钮扣---
函数startOver（）
{
myBox.removeAttribute（“转换”）
TransformRequestObj=mySVG.createSVGTransform（）
var animTransformList=myBox.transform
TransformList=animTransformList.baseVal
}

我首先在JSFIDLE上放一个带有代码/标记的示例。我接受这个答案，这是一个很好的提示，thx，重点是，如果没有原始位置的知识，我无法进行转换。是的，那怎么可能呢？（我回到学校坐在那里几个小时：-）

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