我阅读了很多资源,但似乎无法使SVG图像适合浏览器窗口。
有人告诉我,如果必须在适合现代移动浏览器的Mobile应用程序中使用图像,则必须在html5页面中使用SVG图像。
我似乎无法使SVG图像正常工作!
我将其从illustrator中保存,然后以100%宽度div嵌入html5页面中。
最好的方法是什么?
谢谢你的帮助..
顺便说一句,我正在使用Jquery mobile / HTML5 / CSS3
<embed src="header.svg" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install" />
当我希望它适合设备尺寸时,应如何在“ viewBox”中指定特定的宽度和高度?我没有特定尺寸
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg version="1.1" baseProfile="basic" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="253px" height="60px" viewBox="0 0 253 60" xml:space="preserve">
<g>
<g>
<defs>............
最佳答案
如果您的受众正在使用带有HTML 5解析器(now widely supported)的浏览器,则无需在svg标记中直接使用任何xml内容。您不需要对象或嵌入标签标签。在这一点上那是老派。而且您当然不需要iFrame。另外,为了澄清起见,SVG与jQuery本身无关(实际上,jQuery在svg元素上的作用很差)。只需确保您使用的是html5 doctype,然后编写如下代码:
<svg id="mycoolgraphic" viewBox="0 0 253 60" >
<g>
<g>
<defs>............
</g>
</g>
</svg>
确保所有标签均已关闭,并且作为xml有效。不要制表符缩进或添加一整行间距,那样只会创建空的文本节点。只是把所有丑陋的东西弄糊了。以后,它使任何JavaScript工作都变得更加容易。如果您使用的是illustrator(这很好),则可能需要进入并从主要的svg标记中清除一些xml声明。如果您希望元素能够响应,则忽略任何明确的高度和宽度。您可以通过普通的CSS声明控制高度和宽度:
#mycoolgraphic { height: 10em;width: 10em;}
进行响应式svg的主要技巧是设置
preserveAspectRatio
属性。这是您需要添加的内容。 (从Illustrator导出的图形不会包含preserveAspectRatio
的任何内容。)此属性控制svg内容(视图框)在svg元素(svg视口)中的缩放比例。视图框按比例固定。在Illustrator中创建艺术作品时,它就是边界矩形。除非您非常确定自己知道自己在做什么,否则请不要搞乱它。但是,包含viewbox的svg元素的大小可以像任何html元素一样调整,并且saveAspectRatio属性描述了两者之间的关系。 的MDN文章很好。关于这一点,spec也是令人惊讶的可读性。希望这可以帮助!