将参考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屋!