当前位置：文江博客话题详情

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

发布于 2024-10-18 12:44:12 字数 269 浏览 1 评论 0原文

我使用 Illustrator 创建了一颗星星，并将其另存为 SVG 文件。后来在我的 HTML 编码中，我这样调用该 SVG：

<对象类型=“image/svg+xml”数据=“images/star.svg”宽度=“100％”高度=“100％”>

但我无法在任何浏览器中看到该图像。我尝试过 Safari 5.0 版和 Firefox 5.0 版来预览我的 html。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酷遇一生 2024-10-25 12:44:12

是的，这是可能的。您可以使用 object 标签，也可以使用 CSS background-image，或者在最新的浏览器中，您可以使用

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

回复收藏 0 原文

蘑菇王子 2024-10-25 12:44:12

如果我没记错的话，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”描边-opacity=“null”描边宽度=“2”描边=“#995757”填充=“#FF8787”**。

另请确保将 width="500" 和 height="400" 值更改为对应的值根据您在 Illustrator 中使用的纸张尺寸。

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

相当粗略的解决方案，但我认为 illustrator 创建的 SVG 文件并不完全适合浏览器。

The SVG file format was originally designed for browsers if i am not wrong.

One crude solution to your problem is by using this pre-made SVG sample code:

  <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>

Now open up the SVG file you created in Illustrator with Notepad and find something called the ''d'' attribute. Copy the values of the ''d'' attribute. For example in the sample code above you would be copying this: "m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59". Take extra care to include the "" tags while copying.

Now create a new Notepad file and paste the sample code i gave you above. Then replace the ''d'' value with the value you copied from your Illustrator SVG file. Make sure you set this values in the sample code with the ones you prefer. **fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"**.

Also make sure you change the width="500" and height="400" values with ones that correspond to the paper size you are using in Illustrator.

Then save the file with an .svg extension at the end of the filename and choose to save as type ''All Files'' instead of ''Text Document''.

Pretty crude solution but i think illustrator creates SVG files that are not exactly browser friendly.

回复收藏 0 原文

~没有更多了~