Question

我使用Illustrator创建了一个明星，我将其保存为SVG文件。后来在我的HTML编码中，我称之为SVG：

<object type="image/svg+xml" data="images/star.svg" width="100%" height="100%"></object>

但是我无法在任何浏览器中看到图像。我已经尝试了Safari 5.0和Firefox 5.0版本来预览我的HTML。

是否可以在浏览器中显示SVG文件？

Answer 1

是的，有可能。您可以使用object标记，也可以使用CSS background-image，或者使用最近的浏览器，您可以使用<svg>标记直接嵌入它。阅读本文：

http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii

Answer 2

如果我没错，SVG文件格式最初是为浏览器设计的。

您问题的一个原始解决方案是使用此预制的SVG示例代码：

  <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <path id="svg_7" d="m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59" fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"/>
 </g>
</svg>

现在打开您在Illustrator中使用记事本创建的SVG文件，找到一个名为“d”的属性。复制''d''属性的值。例如，在上面的示例代码中，您将复制此内容： "m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59" 。复制时要特别注意 "" 标记。

现在创建一个新的记事本文件并粘贴我上面给出的示例代码。然后将“d”值替换为从Illustrator SVG文件中复制的值。确保在示例代码中使用您喜欢的值设置此值。 **fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"**。

另外，请确保将 width="500" 和 height="400" 值更改为与您在Illustrator中使用的纸张尺寸相对应的值。< / p>

然后在文件名末尾以.svg扩展名保存文件，并选择保存为“所有文件”类型而不是“文本文档”。

非常粗糙的解决方案，但我认为插图画家创建的浏览器文件并不完全适合浏览器。

Illustrator创建的svg在浏览器中不起作用

2 个答案: