如何从对象标记缩放svg的x和y轴

How to scale svg in x and y axis from a object tag?

本文关键字：svg 缩放 对象      更新时间：2023-09-26

在我的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>

将SVG元素放在div中并缩放它。此外，确保在"steve.svg"中将svg元素本身的宽度和高度设置为100%，以便它与元素一起缩放。您可以在文本编辑器中打开steve.svg并将width="100%" height="100%"添加到<svg></svg>标记

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

然后将steve-container的CSS样式设置为所需的大小

相关文章：