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

Question

In my html file, I have a svg loaded through a object tag. 在我的html文件中，我有一个通过对象标记加载的svg。 I want to scale it in the x and y axis but it is not working. 我想在x和y轴上缩放它，但是它不起作用。 Does anyone know how to do it? 有人知道怎么做吗？

Thanks 谢谢

<!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

put the svg element in a div and scale that instead. 将svg元素放入div并进行缩放。 Also, make sure you set width and height to 100% on the svg element itself within "steve.svg" so that it scales with the element. 另外，请确保在“ steve.svg”中将svg元素本身的宽度和高度设置为100％，以使其随元素缩放。 You can do this by opening steve.svg in a text editor and adding width="100%" height="100%" to the <svg></svg> tags 您可以通过在文本编辑器中打开steve.svg并在<svg></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>

then just set the css style on steve-container to the desired size 然后只需在steve-container上将css样式设置为所需的大小

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

问题描述

1 个解决方案

解决方案1
0 2015-05-28 01:26:28

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

问题描述

1 个解决方案

解决方案1 0 2015-05-28 01:26:28

解决方案1
0 2015-05-28 01:26:28