我想看看当我手动构造变换矩阵时是否可以正确获得矩阵值。带有
id=Oneid=Twoid=One如何才能使
id=Twoid=Oneconsole.log(document.querySelector('#one')
.transform.baseVal.consolidate().matrix);
const svg = document.querySelector('svg');
const testElement = document.querySelector('#two');
const transformList = testElement.transform.baseVal;
let matrix = svg.createSVGMatrix();
matrix = matrix.translate(-247.890625, -60).scale(1, 0).translate(247.890625, 60);
const transform = svg.createSVGTransformFromMatrix(matrix);
transformList.appendItem(transform);
transformList.consolidate();
console.log(matrix);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Transformations</title>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="#EFEFEF"></rect>
<g class="test" transform="translate(400,300)">
<text id="one" x="10" y="60" stroke="red" fill="red" font-size="45px" text-anchor="start" transform="translate(-247.890625,-60)scale (1,0)translate(247.890625,60)" style="text-rendering: geometricprecision; font-size: xxx-large;">F</text>
<text id="two" x="10" y="60" stroke="green" fill="green" font-size="45px" text-anchor="start" style="text-rendering: geometricprecision; font-size: xxx-large;">X</text>
</g>
</svg>
<script type="text/javascript"></script>
</body>
</html>SVGMatrix.scale(s)
不同，
DOMMatrix.scale(sx, sy)SVGMatrix.scaleNonUniform(sx, sy)不幸的是，目前浏览器在执行
svg.createSVGMatrix()SVGMatrixDOMMatrix