jquery - SVG 图像比例？对于移动应用程序

Question

我阅读了很多资源，但我似乎无法让 SVG 图像适合浏览器窗口。

有人告诉我，如果我必须在适合现代移动浏览器的移动应用程序中使用图像，我就必须在 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”适合设备尺寸时，我应该如何在“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>............

Answer 1

如果您的受众使用带有 HTML 5 解析器 ( now widely supported ) 的浏览器，您不需要直接在 svg 标记中添加任何 xml 内容。您不需要对象或嵌入标签。在这一点上这已经是老派了。而且您当然不需要 iFrame。另外，澄清一下，SVG 本身与 jQuery 无关(事实上，jquery 与 svg 元素的配合非常糟糕)。只需确保您使用的是 html5 文档类型，然后编写如下内容:

<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 内容(viewbox)在 svg 元素(svg 视口(viewport))。 View 框按比例固定。它是您在 illustrator 中创建艺术作品时的边界矩形。除非您非常确定自己知道自己在做什么，否则不要搞乱它。然而，包含 View 框的 svg 元素可以像任何 html 元素一样调整大小，并且preserveAspectRatio 属性描述了两者之间的关系。 MDN关于preserveAspectRatio 的文章很好。 spec在这一点上也令人惊讶地具有可读性。

希望这有帮助!