Question

标记的svg工作表的操作完美，但对象标记中的svg文件的操作仅在Firefox，IE和Edge上有效。但不适用于Chrome和Opera。我已经坐了好几个小时，因为我有必要通过所有浏览器来操作svg文件。我希望有人能帮助我。其他主题的解决方案也显示出相同的不兼容性。

JavaScript and SVG in HTML

How to access SVG elements with Javascript

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>
    <object data="Vernetzung.svg" type="image/svg+xml" width="100%" id="vernetzung">Your browser doesn't support SVG</object>

    <svg id="svgObject" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
        <rect id="svgItem" width="800" height="800" fill="red"></rect>
    </svg>

    <script>
        function rotate() {
            // rotate in html-svg
            var svgItem = document.getElementById("svgItem");
            svgItem.setAttribute('transform', 'rotate(20)');

            //rotate in svg-file
            var a = document.getElementById('vernetzung');
            var svgDoc = a.contentDocument;
            var P1 = svgDoc.getElementById("P1");
            P1.setAttribute('transform', 'rotate(20)');
        }

        window.onload = function () {
            rotate();
        }
    </script>
</body>
</html>

这是示例文件“ Vernetzung.svg”：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<rect id="P1" width="800" height="800" fill="blue"></rect>
</svg>

Chrome在这条线上扔了一个箭头：

var P1 = svgDoc.getElementById("P1");

Chrome错误消息：

Uncaught TypeError: Cannot read property 'getElementById' of null
at rotate (svg_Test.html:21)
at window.onload (svg_Test.html:26)
rotate @ svg_Test.html:21
window.onload @ svg_Test.html:26
load (async)
(anonymous) @ svg_Test.html:25

如果我通过加载对象来设置功能：

<object onload="rotate()" data="Vernetzung.svg" type="image/svg+xml" width="100%"  id="vernetzung"></object>

它也仅适用于Firefox，IE和Edge。

svg文件属性操作在Chrome和Opera中不起作用

0 个答案: