将参考SVG图像嵌入HTML文件 [英] Embedding a referential SVG image into HTML file

问题描述

我有一个项目，我想把简单的图形背景放入表格单元格。背景图像和一个小的svg文件工作太棒了！

I have a project where I want to put simple graphic backgrounds into table cells. background-image and a small svg file works great!

但我真的想把源全部保存在一个文件中。也就是说，我想能够在HEAD中定义图像，并在内联STYLE css中引用它。

But I would really like to keep the source all in one file. That is, I would like to be able to define the image in the HEAD, and refer to it in the inline STYLE css.

我尝试了ID属性的各种组合在svg和哈希引用在css url（）函数中，但没有成功。这似乎是一个可取的事情，但环顾四周，我没有看到一个想法的提示。

I have tried various combinations of ID attributes in the svg and hash references in a css url() function, but no success. This would seem to be a desirable thing to do, but looking around, I haven't seen a hint of an idea. Which tells me either it cannot be done, or it is done some other way...

建议？

推荐答案

事实上，在提出问题和思考之后，我意识到我已经阅读了答案。您需要使用数据网址来创建一个内嵌的svg图形。这可以给css类的background-image属性，如下：

Actually after asking the question and thinking about it, I realized I had read the answer already. You need to use a a data url to create an in-line svg graphic. This you can give to the background-image property of a css class, as thus:

{background-image：url（
data：image / svg + xml; utf8，\
... \
）;}

{background-image:url( "data:image/svg+xml;utf8,\ ...\ ");}

编码utf8将允许您输入代码直接，用反斜杠转义新行，避免双引号（据我所知;-)。现在你只需要设置TD的类，它的工作太棒了！

The encoding utf8 will allow you to type in the code directly, escaping the new lines with backslashes and avoiding double quotes (as far as I know;-). Now you just set the CLASS of the TD and it works great!

现在我需要做的是弄清楚如何对齐底部的背景，而不是顶部...

Now all I have to do is figure out how to align the background on the bottom rather than the top...

这篇关于将参考SVG图像嵌入HTML文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！