使用数据URI SVG作为CSS背景图像 [英] Using an Data URI SVG as a CSS background image

问题描述

背景：

• 目标：创建一个可以通过CSS应用的三角形阴影，


• 经过大量的研究（我肯定愿意接受替代品），我选择使用SVG背景图像作为数据uri（避免
的工作原理： http： //jsfiddle.net/6WAtQ/

我被困在哪里： p>

• 我创建了一个简单的svg三角形，具有高斯模糊效果，如果它直接写在HTML（而不是CSS）该svg完美地工作： http://jsfiddle.net/RAKWB/

  
  
  

  < svg class =shadowxmlns =http://www.w3.org/2000/svgversion =1.1>
< defs>
< filter id =f1>
< feGaussianBlur in =SourceGraphicstdDeviation =5/>
< / filter>
< / defs>
< polygon points =200,0 200,200 0,200filter =url（＃f1）/>
< / svg>




• 所以我试图复制上述（http://jsfiddle.net/6WAtQ/ ）使用我自己的三角形svg，



• 我替换了哈希没有骰子



• 无效： http：/ /jsfiddle.net/ZPWxK/1/

  
  
  

  body {background-image：url（data：image / svg + xml ; utf8，data：image / svg + xml; utf8，< svg class =shadowxmlns =http://www.w3.org/2000/svgversion =1.1>< defs> ; filter id =f1>

  h2_lin>解决方案

  看看工作的小提琴有双引号只是在url（）内，然后所有的SVG内容使用单引号。你需要做同样的事情，否则解析器不知道url内容的结束位置。

  
  
  

  或者，你可以使url使用单引号，并保持你的SVG内容相同。

    body {background-image：url（'data：image / svg + xml; utf8，< svg class = shadowxmlns =http://www.w3.org/2000/svgversion =1.1>< defs>< filter id =f1>< feGaussianBlur in =SourceGraphicstdDeviation = 5/>< / filter>< / defs>< polygon points =200,0 200,200 0,200filter =url（％23f1）/>< / svg>'）; } 
    

  
  

  Backstory:

  • Goal: create a triangular shadow that can be applied via CSS and is scale-independant (i.e. a vector, not a raster image)
  • After much research (tho I'm certainly open to alternatives) I chose to use an SVG background image as a data uri (to avoid the extra HTTP request).
  • I know that this can work: http://jsfiddle.net/6WAtQ/

  Where I'm stuck:

  • I created a simple svg triangle, with a Gaussian blur effect, if it's written directly in the HTML (as opposed to the CSS) the svg works perfectly: http://jsfiddle.net/RAKWB/

    <svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <polygon points="200,0 200,200 0,200" filter="url(#f1)"/> </svg>​

  • So I tried to replicate the above ( http://jsfiddle.net/6WAtQ/ ) using my own triangle svg,

  • I replaced the hash signs with '%23', but no dice

  • It's not working: http://jsfiddle.net/ZPWxK/1/

    body { background-image: url("data:image/svg+xml;utf8,data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>"); }

  Thoughts?

  解决方案

  See how the working fiddle has double quotes just inside the url() and then all the SVG content uses single quotes. You need to do the same otherwise the parser doesn't know where the url content ends.

  Alternatively you could make the url use single quotes and keep your SVG content the same.

  body { background-image: url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>'); }
  

  这篇关于使用数据URI SVG作为CSS背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！