我有一些指定SVG文件width和height以及viewbox这样的:
<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...
但是如何在浏览器中以我决定的大小显示它们？我希望它们更小,并尝试过:
<object width="400" data="image.svg"></object>
但后来我得到了可见的滚动条.
如果我改变SVG文件设置它的工作原理width,并height以100%相反,但我想决定在HTML的大小,无论在SVG文件中使用什么尺寸.这可能吗 ？
小智 159
您可以向<svg>标记添加"preserveAspectRatio"和"viewBox"属性来完成此操作.
在编辑器中打开.svg文件并找到<svg>标记.在该标记中,添加以下属性:
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"
将{width}和{height}替换为viewBox的一些默认值.我使用了SVG标签的"width"和"height"属性中的值,它似乎有效.
保存SVG,现在应该按预期进行扩展.
我在这里找到了这个信息:
https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing
Zit*_*rax 33
当我在2009年问这个问题时,这里给出的答案都没有给我带来帮助.因为我现在再次遇到同样的问题,我注意到使用<img>标签和宽度以及svg一起工作正常.
<img width="400" src="image.svg">
您可以使用JavaScript访问嵌入式svg:
var svg = document.getElementsByTagName('object')[0].\
contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');
由于你的svg已经有了一个viewBox,Firefox应该将viewBox中的576像素宽度缩放到文档中的400像素宽度.其他svgs可能会受益于从广告的宽度和高度派生的新viewBox(这些通常是相同的数字).其他浏览器可能会受益于不同的svg调整.
小智 9
<body>
<div>
<object type="image/svg+xml" data="img/logo.svg">
<img src="img/logo.svg" alt="Browser fail" />
</object>
</div>
img/logo.svg ...
<svg
width="100%"
height="100%"
viewBox="0 0 640 80"
xmlns="http://www.w3.org/2000/svg"
version="1.1" />
这个设置对我有用.
我遇到一个问题,即iPad上的iOS无法正确调整<object>标签中的SVG图像大小.
CSS样式会增加或减少<object>容器的大小,但不会修改其内部的图像(在iPad,iOS 7上).
SVG图像是从Adobe Illustrator导出的,解决方案结果是替换宽度和高度:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843"
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">
有:
width="100%" height="100%"
我需要使用<object>标签,因为<img>标签当前不支持在SVG中嵌入位图图像.
设置缺少的视图框并在svg标记中填写set height和height属性的高度和宽度值
然后,只需将高度和宽度设置为所需的百分比值即可缩放图片.祝好运.
您可以使用preserveAspectRatio ="x200Y200 meet来设置固定的宽高比,但这不是必需的
例如
<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:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="10%"
height="10%"
preserveAspectRatio="x200Y200 meet"
viewBox="0 0 350 350"
id="svg2"
version="1.1"
inkscape:version="0.48.0 r9654"
sodipodi:docname="namesvg.svg">
| 归档时间： |
|
| 查看次数： |
91825 次 |
| 最近记录： |