Question

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

Answer 1

将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样式设置为所需的大小

如何在对象标签的x和y轴上缩放svg？

1 个答案: