在HTML中缩放/调整SVG大小

我在html中使用svg徽标来显示它。但标志看起来似乎比看起来要大得多。我想按比例缩小到100px的高度和宽度。我该怎么办？在HTML中缩放/调整SVG大小

下面是SVG代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!-- Created with Inkscape (http://www.inkscape.org/) --> 

<svg 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
    preserveAspectRatio="xMinYMin meet" 
    viewPort="0 0 100 29" 
    width="400" 
    height="114.38815" 
    id="svg2" 
    version="1.1" 
    inkscape:version="0.48.2 r9819" 
    sodipodi:docname="Accenture.svg"> 
    <title 
    id="title4080">Logo of Accenture</title> 
    <defs 
    id="defs4"> 
    <clipPath 
     id="clipPath3441" 
     clipPathUnits="userSpaceOnUse"> 
     <path .................

这里是我使用的HTML代码：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/checkbox.css"/> 
     <link rel="stylesheet" href="css/jquery.mobile-1.1.1.css" /> 

    <title>Homepage</title> 
    <script src="scripts/jquery-1.8.2.min.js"></script> 
    <script src="scripts/jquery.mobile-1.2.0.min.js"></script> 
    <script type="text/javascript" src="scripts/xml.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
       /*alert("Home Page Ready");*/ 
     }); // document 
    </script> 

    <style> 
     .headerTableClass{ 
      width: 100%; 
     } 
     .headerRowClass{ 
      background-color: white; 
      width: 100%; 
     } 
     .tableCell{ 
      padding-bottom: 0px; 
      padding-left: 0px; 
      padding-right: 0px; 
      padding-top: 0px; 
     } 
    </style> 

</head> 

<body> 
    <!-- ******** Header **********--> 
    <div data-role="header" style="padding-top: 0px"> 
     <div> 
      <table id="headerTable" class="headerTableClass"> 
       <tr id="headerRow" class="headerRowClass"> 
        <td class="tableCell"><embed src="mobileSVG/acclogo1.svg" style="height: 130px; width:500px;" type="image/svg+xml"></td> 
       </tr> 
      </table> 
     </div> 
    </div><!-- /header --> 

    <!-- ******** Content **********--> 
    <div data-role="content" class="contentGrayBg"> 

    </div> <!-- Content End --> 

    <!-- ******** Footer **********--> 
    <div data-role="footer"> 
     <div class="footerPadding"> 
      <label style="color: red; font-style: normal; font-size: 12px">Go to Accenture.com</label> <br/> 
      <label style="font-size: 12px;">&copy; 2012 Accenture. All Rights Reserved.</label> 
     </div> 
    </div> <!-- Content Footer --> 
</body> 
</html>

感谢， ANKIT。

来源

2012-12-06 Ankit Tanna

我有一个类似的问题，调整大小在Internet Explorer中的SVG文件，我解决它通过在SVG板分隔视框，就像这样：

viewBox="0 0 x y"

的“x”是宽度和“y”画布的高度。

我不确定这是否是您的问题，但因为您的svg不会编译，我认为它值得一拍

来源

2013-06-19 15:38:32 Bruno

是啊！这是它的工作:) –

这很奇怪 - 我有Adobe Illustrator的SVG文件已经有viewBox，我仍然看到这个问题 –

在HTML中缩放/调整SVG大小

回答

相关问题