getCTM() on svg viewbox not working
Categories
(Core :: SVG, defect)
Tracking
()
People
(Reporter: samikpal26, Unassigned)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0
Steps to reproduce:
I am working on a svg element and when I call
document.querySelector('svg').getCTM() it returns null.
The full code is below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect x="0" y="0" width="1280" height="720" fill="ghostwhite"></rect>
<g transform="translate(10,10)">
<g transform="translate(100 100)">
<circle id="circ" r="20" cx="25" cy="25" fill="green"
transform="translate (100,400) scale(2)" />
</g>
</g>
<path d="M0,0 L150,0 L150,50 L0,50 Z" fill="none", stroke="red" transform="translate (100,400) scale(2)" />
</svg>
</body>
<script type="text/javascript">
const widthPoints = [];
const heightPoints = [];
for (let i = 0; i <= 720; i += 20) {
heightPoints.push(i)
}
for (let i = 0; i <= 1280; i += 20) {
widthPoints.push(i)
}
const scaleY = d3.scaleLinear()
.range([720, 0])
.domain(d3.extent(heightPoints, d => d))
const scaleX = d3.scaleLinear()
.range([0, 1280])
.domain(d3.extent(widthPoints, d => d));
d3.select('svg').append('g').attr('class', 'yAxisLeft')
.call(d3.axisLeft(scaleY)
.ticks(heightPoints.length - 1)
.tickSizeInner([(-(1280))])
)
d3.select('svg').append('g').attr('class', 'xAxisBottom')
.call(d3.axisBottom(scaleX)
.ticks(widthPoints.length - 1)
.tickSizeInner([(-(720))])
)
.style('transform', translateY(720px))
d3.select('circle')
.attr('opacity', '0.5')
const svg = document.querySelector('svg');
const matrixViewBox = svg.getCTM();
const circ = document.querySelector('circle');
const matrixCircle = circ.getCTM();
const xx = circ.cx.baseVal.value; // takes care of unit conversion
const yy = circ.cy.baseVal.value;
//console.log(new DOMPoint(xx, yy).matrixTransform(matrixCircle));
const matrixFromCircleToViewBox = matrixViewBox.inverse().multiply(matrixCircle);
console.log(new DOMPoint(xx, yy).matrixTransform(matrixFromCircleToViewBox));
</script>
</html>
Actual results:
const matrixViewBox = svg.getCTM();
returns null in Firefox
whereas Chrome returns a SVGMatrix object like this
{
a: 0.7949999809265137,
b: 0,
c: 0,
d: 0.7949999809265137,
e: 0;
f: 0.000019073486320433253
}
Expected results:
{
a: 0.7949999809265137,
b: 0,
c: 0,
d: 0.7949999809265137,
e: 0;
f: 0.000019073486320433253
}
|
Reporter | |
Comment 1•2 years ago
|
||
|
||
Comment 2•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Updated•2 years ago
|
Description
•