0

表示するために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>

ありがとう、アンキット。

4

1 に答える 1

1

Internet Explorer で svg ファイルのサイズを変更する際に同様の問題が発生しました。次のように、svg ヘッダーでビューボックスを定義することで解決しました。

viewBox="0 0 x y"

「x」はキャンバスの幅、「y」は高さです。

それがあなたの問題かどうかはわかりませんが、あなたのsvgはコンパイルされないので、試してみる価値があると思います

于 2013-06-19T15:38:32.287 に答える