Svg scale() is not working on Edge(Not Edge Chronium)
Question
I have code that uses the scale() command.
This works great for chrome and mozilla.
This does not work for edge, i have provided some code so you can easily reproduce the problem.
I am trying to do it manually. I am already feeling the pain with the amount of calculations that need to be done.
Is there a better way?
I am only reversing the x and y.
scale(1,-1)
scale(-1,-1)
scale(1,1)
scale(-1,1)
Are there any tips in order to achieve this functionality?
The end result should work for edge.
Reproducible Example:
In the svg property try changing scale(-1, -1) -> scale(1,1) . Chrome will reverse the axis while edge will do nothing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.js" integrity="sha256-3BMRAc+yX0neFRvyfGGfd3aZK8NKwYTOzq93ubNY2iU=" crossorigin="anonymous"></script>
</head>
<body>
<div id="example" style="width:1000px;">
</div>
</body>
<script>
const svg = d3.select('#example')
.append('svg')
.attr('width', '100%')
.attr('height', '500%')
.attr('transform', 'scale(-1,-1)');
svg.append('rect')
.attr('id', 'example-1')
.attr('width', '20%')
.attr('height', '30%')
.attr('x', '10%')
.attr('y', '20%')
.attr('fill','red');
svg.append('rect')
.attr('id', 'example-1')
.attr('width', '20%')
.attr('height', '30%')
.attr('x', '30%')
.attr('y', '20%')
.attr('fill','blue');
svg.append('rect')
.attr('id', 'example-1')
.attr('width', '20%')
.attr('height', '30%')
.attr('x', '10%')
.attr('y', '40%')
.attr('fill','yellow');
svg.append('rect')
.attr('id', 'example-1')
.attr('width', '20%')
.attr('height', '30%')
.attr('x', '30%')
.attr('y', '40%')
.attr('fill','orange');
</script>
</html>
1 answers
solution1
2 ACCPTED 2019-10-07 09:51:35
Create a <g> child element and scale that instead.
I've added a translate so you can still see the output in the example and I've made all the id values unique.
const svg = d3.select('#example').append('svg').attr('width', '100%').attr('height', '500%') const g = svg.append('g').attr('transform', ' translate(500, 100) scale(-1,-1)'); g.append('rect').attr('id', 'example-1').attr('width', '20%').attr('height', '30%').attr('x', '10%').attr('y', '20%').attr('fill','red'); g.append('rect').attr('id', 'example-2').attr('width', '20%').attr('height', '30%').attr('x', '30%').attr('y', '20%').attr('fill','blue'); g.append('rect').attr('id', 'example-3').attr('width', '20%').attr('height', '30%').attr('x', '10%').attr('y', '40%').attr('fill','yellow'); g.append('rect').attr('id', 'example-4').attr('width', '20%').attr('height', '30%').attr('x', '30%').attr('y', '40%').attr('fill','orange');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div id="example" style="width:1000px;"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.