在HTML中缩放SVG

Question

I am using an svg logo in html for displaying it. 我正在html中使用svg徽标进行显示。 but the logo seems to appear much more larger than it appears. 但是徽标看起来比看起来要大得多。 I want to scale it down to 100px height and width in proportion. 我想按比例缩小到100px的高度和宽度。 what should I do? 我该怎么办？

Here is the SVG Code: 这是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 .................

Here is the HTML code that I am using: 这是我正在使用的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>

Thanks, Ankit. 谢谢，安吉。

Answer 1

I had a similar problem resizing a svg file in Internet Explorer, I solved it by defining a viewbox in the svg header, like this: 我在Internet Explorer中调整svg文件的大小时遇到类似的问题，我通过在svg标头中定义一个视图框来解决该问题，如下所示：

viewBox="0 0 x y"

Where 'x' is the width and 'y' the height of the canvas. 其中“ x”是画布的宽度，“ y”是画布的高度。

I'm not sure if that is your problem but since, your svg wont compile, i think it worth a shot 我不确定这是否是您的问题，但是由于您的svg无法编译，我认为值得一试

在HTML中缩放SVG

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-06-19 15:38:32

在HTML中缩放SVG

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-06-19 15:38:32

解决方案1
1 已采纳 2013-06-19 15:38:32