在HTML中缩放/调整SVG的大小 [英] Scaling/Resizing SVG in an HTML
本文介绍了在HTML中缩放/调整SVG的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在html中使用svg徽标来显示它。但标志看起来似乎比看起来要大得多。我想按比例缩小到100px的高度和宽度。我应该怎么做？
以下是SVG代码：
<？xml version =1.0encoding =UTF-8standalone =no？>
<！ - 用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>埃森哲徽标< / title>
< defs
id =defs4>
< clipPath
id =clipPath3441
clipPathUnits =userSpaceOnUse>
<路径.................
以下是我使用的HTML代码：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =css / checkbox.css/>
< link rel =stylesheethref =css / jquery.mobile-1.1.1.css/>
< title>主页< / 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 / javascriptsrc =scripts / xml.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
/ * alert（Home Page Ready）; * /
}）; //文档
< / script>
< style>
.headerTableClass {
width：100％;
}
.headerRowClass {
background-color：white;
宽度：100％;
}
.tableCell {
padding-bottom：0px;
padding-left：0px;
padding-right：0px;
padding-top：0px;
}
< / style>
< / head>
< body>
<！ - ********标题********** - >
< div data-role =headerstyle =padding-top：0px>
< div>
< table id =headerTableclass =headerTableClass>
< tr id =headerRowclass =headerRowClass>
< td class =tableCell>< embed src =mobileSVG / acclogo1.svgstyle =height：130px; width：500px;类型= 图像/ SVG + xml 的>< / TD>
< / tr>
< / table>
< / div>
< / div><！ - / header - >
<！ - ********内容********** - >
< div data-role =contentclass =contentGrayBg>
< / div> <！ - 内容结束 - >
<！ - ******** Footer ********** - >
< div data-role =footer>
< div class =footerPadding>
< label style =color：red; font-style：normal; font-size：12px>转至Accenture.com< / label> <峰; br />
< label style =font-size：12px;>& copy; 2012年埃森哲。保留所有权利。< / label>
< / div>
< / div> <！ - 内容页脚 - >
< / body>
< / html>
谢谢，
Ankit。
viewBox =0 0 xy
其中'x'是宽度，'y'是画布的高度。
我不确定这是否是您的问题，但因为您的svg不会编译，我认为这值得拍摄
I am using an svg logo in html for displaying it. 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. what should I do?
Here is the SVG Code:
<?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:
<!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;">© 2012 Accenture. All Rights Reserved.</label>
</div>
</div> <!-- Content Footer -->
</body>
</html>
Thanks, Ankit.
解决方案
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:
viewBox="0 0 x y"
Where 'x' is the width and 'y' the height of the canvas.
I'm not sure if that is your problem but since, your svg wont compile, i think it worth a shot
这篇关于在HTML中缩放/调整SVG的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
