Javascript 如何从对象标记在x轴和y轴上缩放svg？_Javascript_Html_Svg

Javascript 如何从对象标记在x轴和y轴上缩放svg？

javascript html svg

Javascript 如何从对象标记在x轴和y轴上缩放svg？,javascript,html,svg,Javascript,Html,Svg,在我的html文件中，我通过对象标记加载了一个svg。我想在x轴和y轴上缩放它，但它不工作。有人知道怎么做吗谢谢 <!DOCTYPE html> <html> <head> <title>Animate</title> <style> </style> </head> <body> <obj

在我的html文件中，我通过对象标记加载了一个svg。我想在x轴和y轴上缩放它，但它不工作。有人知道怎么做吗

谢谢

<!DOCTYPE html>
<html>
    <head>
        <title>Animate</title>
        <style>
        </style>

    </head>
    <body>

        <object data="images/steve/steve.svg" type="image/svg+xml" id="steve" width="100%" height="100%"></object>

        <script>

            var steve = document.getElementById("steve");

            steve.addEventListener("load", function() {

                var svgDoc = steve.contentDocument; 


                //steve.setAttribute('transform','scale(1.0 2.0)');   // this does not work

            },false);
        </script>
    </body>

</html>


使有生气
var steve=document.getElementById（“steve”）；
steve.addEventListener（“加载”，函数（）{
var svgDoc=steve.contentDocument；
//setAttribute（'transform'，'scale（1.0 2.0）；//这不起作用
}，假）；

将svg元素放在一个div中，并对其进行缩放。另外，请确保在“steve.svg”中将svg元素本身的宽度和高度设置为100%，以便它可以随元素缩放。您可以通过在文本编辑器中打开steve.svg并将

width=“100%”height=“100%”

添加到

标记中来完成此操作

<div id="steve-container">
    <object data="images/steve/steve.svg" type="image/svg+xml" id="steve" width="100%" height="100%"></object>
</div>

然后只需将steve容器上的css样式设置为所需的大小

您需要在svgDoc中的元素上设置转换，即通过svgDoc.getElementById（“任意”），而不是在对象元素上设置转换。话虽如此，如果要缩放所有对象，最简单的方法是将对象元素的高度和宽度设置为200%