1

我阅读了很多资源，但似乎无法让 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”中指定某个宽度和高度？我没有具体尺寸

 <?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>............
4

1 回答 1

4

如果您的观众正在使用带有 HTML 5 解析器（现在得到广泛支持）的浏览器，那么您不需要任何直接在 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）中的缩放方式。视图框按比例固定。当您在 illustrator 中创建艺术作品时，它是边界矩形。除非您非常确定自己知道自己在做什么，否则不要乱用它。然而，包含视图框的 svg 元素可以像任何 html 元素一样调整大小，并且 preserveAspectRatio 属性描述了两者之间的关系。关于 preserveAspectRatio的MDN文章很好。规格_在这一点上也令人惊讶地可读。

希望这可以帮助！

于 2012-07-10T07:39:29.553 回答