Question

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

这是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。

Answer 1

我在Internet Explorer中调整svg文件时出现了类似的问题，我通过在svg标头中定义一个视图框来解决它，如下所示：

viewBox="0 0 x y"

其中'x'是画布的宽度，'y'是画布的高度。

我不确定这是不是你的问题但是因为，你的svg不会编译，我觉得值得一试

在HTML中缩放/调整SVG大小

1 个答案: