如何從對象標籤縮放x和y軸的svg？

在我的html文件中，我有一個通過對象標籤加載的svg。我想在x和y軸上縮放它，但它不起作用。有誰知道該怎麼做？如何從對象標籤縮放x和y軸的svg？

感謝

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

來源

2015-05-28 omega

您需要設置的變換做到這一點在svgDoc中的一個元素上，即通過svgDoc.getElementById（「whatever」），而不是在對象元素上。話雖如此，如果你想縮放一切，最簡單的方法是將對象元素的高度和寬度設置爲200％ –

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

那麼剛纔設置的CSS樣式上史蒂夫容器所需的大小

來源

2015-05-28 01:26:28 Mike

如何從對象標籤縮放x和y軸的svg？

回答

相關問題