contentDocument возвращает null

Question

Мне надо изменить расположение куба при нажатии на кнопку. Я должен получить координаты куба(в примере используется только прямоугольник) и изменить их. Но contentDocument возвращает null, из за чего getElementById вызывает ошибку.

html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
</head>
<body>

    <object data="kub.svg" width="500" height="600" type="image/svg+xml" id="kub"> 
    </object>

    <input type=button value="Смещение по оси OX" onClick="test1()">

    <script type="text/javascript">

        var temp, xx, yy, zz;
        temp = document.getElementById("kub");

        function test1() {
            var svgDoc = temp.contentDocument;

            *var r1 = svgDoc.getElementById("r1");*
   
            xx = r1.getAttribute("x");
            xx = IntParse(xx);
            r1.setAttribute("x", xx);
        }

    </script>

</body>
</html>

SVG:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">     
<svg version="1.1" width="100%" height="100%" fill="none" 
xmlns="http://www.w3.org/2000/svg">

    <g>
        <line x1 = "300" y1 = "300" x2 = "500" y2 = "300" stroke = "black" fill = "none" 
        stroke-width = "1">
        </line>
        <line x1 = "500" y1 = "300" x2 = "490" y2 = "300" stroke = "black" fill = "none"
        stroke-width = "1" transform = "rotate(45, 500, 300)">
        </line>
        <line x1 = "500" y1 = "300" x2 = "490" y2 = "300" stroke = "black" fill = "none"
        stroke-width = "1" transform = "rotate(-45, 500, 300)">
        </line>
        <text x = "510" y = "303" stroke = "black" fill = "none">
            y
        </text>
    </g>

    <g>
        <line x1 = "300" y1 = "300" x2 = "300" y2 = "100" stroke = "black" fill = "none" 
        stroke-width = "1">
        </line>
        <line x1 = "300" y1 = "100" x2 = "300" y2 = "110" stroke = "black" fill = "none"
        stroke-width = "1" transform = "rotate(45, 300, 100)">
        </line>
        <line x1 = "300" y1 = "100" x2 = "300" y2 = "110" stroke = "black" fill = "none"
        stroke-width = "1" transform = "rotate(-45, 300, 100)">
        </line>
        <text x = "297" y = "95" stroke = "black" fill = "none">
            z
        </text>
    </g>

    <g>
        <line x1 = "300" y1 = "300" x2 = "150" y2 = "450" stroke = "black" fill = "none" 
        stroke-width = "1">
        </line>
        <line x1 = "150" y1 = "450" x2 = "157" y2 = "443" stroke = "black" fill = "none"
        stroke-width = "1" transform = "rotate(45, 150, 450)">
        </line>
        <line x1 = "150" y1 = "450" x2 = "157" y2 = "443" stroke = "black" fill = "none"
        stroke-width = "1" transform = "rotate(-45, 150, 450)">
        </line>
        <text x = "143" y = "463" stroke = "black" fill = "none">
            x
        </text>
    </g> 

    <line x1="350" y1="400" x2="300" y2="450" stroke="red" stroke-width="2"></line>
    <line x1="450" y1="400" x2="400" y2="450" stroke="red" stroke-width="2"></line>
    <rect id="r1" x="300" y="350" height="100" width="100" stroke="red" stroke-width="2"</rect>
    <rect x="350" y="300" height="100" width="100" stroke="red" stroke-width="2"></rect>
    <line x1="350" y1="300" x2="300" y2="350" stroke="red" stroke-width="2"></line>
    <line x1="450" y1="300" x2="400" y2="350" stroke="red" stroke-width="2"></line>

</svg>

Ошибка:

Uncaught TypeError: Cannot read properties of null (reading 'getElementById')

БЛОГ НА HUSL

contentDocument возвращает null

Ответы (0 шт):