Svg scale() 不适用于 Edge（不是 Edge Chromium）

Question

我有使用 scale() 命令的代码。

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.

我正在尝试手动完成。我已经感受到需要完成大量计算的痛苦。

有没有更好的方法？

我只是颠倒了 x 和 y。

scale(1,-1)
scale(-1,-1)
scale(1,1)
scale(-1,1)

有什么技巧可以实现这个功能吗？

The end result should work for edge.

可重现的例子：

在 svg 属性中尝试更改 scale(-1, -1) -> scale(1,1)。 Chrome 将反转轴 而边缘将不做任何事情。

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

Answer 1

创建一个 <g> 子元素并对其进行缩放。

我添加了一个翻译，这样您仍然可以看到示例中的输出，并且我已将所有 id 值设为唯一。

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>

Svg scale() 不适用于 Edge（不是 Edge Chromium）

Svg scale() is not working on Edge(Not Edge Chronium)

javascript

svg

d3.js

microsoft-edge

可重现的例子：