背景图像带有使用外部图像不工作的掩码的SVG [英] background image SVG with mask using external image not working
问题描述
我试图将SVG图像用作css背景图像。所讨论的SVG最终将使用一些大的JPEG图像（嵌入或链接）作为其他SVG元素的遮罩。我这样做而不是使用PNG来节省文件大小。 （我高度压缩的灰度jpegs很小）
目前我只能获得嵌入的base64编码图像才能正常显示，而Safari只是不起作用（除了使用嵌入显示直接使用SVG）
以下是我的测试代码： b
.org和链接应该是持久的 - 我省略了base64编码数据）
index.html
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =Content-Typecontent =application / xhtml + xml>
< style type =text / css>
body {font-family：Arial，sans; }
.box1，.box2，.box3 {width：400px; height：100px; background-size：192px 192px; margin：10px 10px 0px 0px;填充：10px; }
.box1 {background：url（test1.svg）; }
.box2 {background：url（test2.svg）; }
.box3 {background：url（test3.svg）; }
.sml {width：100px; height：100px; margin：10px 10px 10px 0px; }
< / style>
< / head>
< body>
< div class =box1>测试1< / div>
< div class =box2>测试2< / div>
< div class =box3> Test 3< / div>
< img class =smlsrc =test1.svgtype =image / svg + xml>
< img class =smlsrc =test2.svgtype =image / svg + xml>
< img class =smlsrc =test3.svgtype =image / svg + xml>
< embed class =smlsrc =test1.svgtype =image / svg + xml>
< embed class =smlsrc =test2.svgtype =image / svg + xml>
< embed class =smlsrc =test3.svgtype =image / svg + xml>
< / body>
< / html>
working embedded image SVG
<？xml version =1.0standalone =no？>
<！DOCTYPE svg PUBLIC - // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
< svg xmlns：cc =http://web.resource.org/cc/
xmlns：dc =http://purl.org/dc/elements/1.1/
xmlns：rdf =http://www.w3.org/1999/02/22-rdf-syntax-ns#
xmlns =http://www.w3.org/2000/ svg
xmlns：svg =http://www.w3.org/2000/svg
xmlns：xlink =http://www.w3.org/1999/xlink
x =0pxy =0pxwidth =192pxheight =192pxviewBox =0 0 192 192>
< style type =text / cssid =style_css_sheet>
.orange {fill：＃f9690e; }
.yellow {fill：＃f1d40f; }
< / style>
< defs>
< filter id =invert>
< feColorMatrix in =SourceGraphictype =matrixvalues = - 1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0/>
< / filter>
< rect id =box-bgx =0y =0width =192pxheight =192pxclass =yellow/>
< rect id =box-fgx =0y =0width =192pxheight =192pxclass =orange/>
[[DATA]]>< / image>
< / mask>
< / defs>
< use xlink：href =＃box-bgoverflow =visible>< / use>
< use xlink：href =＃box-fgmask =url（＃fg-mask）overflow =visible>< / use>
< / svg>
打破image xlink variant
< mask id =fg-maskx =0y =0width = 192pxheight =192pxmaskUnits =userSpaceOnUsemaskContentUnits =userSpaceOnUse>
< image id =mask-imgwidth =192pxheight =192pxfilter =url（#invert）xlink：href =http://bit.ly/1u61zrE> < /图像>
< / mask>
所以... Safari只喜欢嵌入标签，Chrome和Firefox可以做背景，但只能在图像被嵌入为数据。关于如何让Safari工作的任何想法，至少在嵌入式数据方面都会很棒。如果有办法让他们工作，甚至更好... ...
谢谢。
有关隐私原因 SVG-as-an-a-image必须在一个文件中完整。浏览器绝不会在SVG-as-an-an-image中支持外部引用。基本前提是，你只能用SVG-as-an-image来完成你可以用光栅图像做的事情。
如果你需要外部引用，使用< object> 或< iframe>
I'm attempting to use an SVG image as a css background image. The SVG(s) in question will ultimately use a number of large JPEG images (embedded or linked) as a mask for other SVG elements. I'm doing this instead of using PNGs for the file size savings. (my highly compressed grayscale jpegs are tiny)
Currently I can only get embedded base64 encoded images to display properly and Safari just doesn't work (aside from using embed to show the SVG directly)
The following is my testing code:
(All images are from archive.org and links should be persistent - I've omitted the base64 encoded data)
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml">
<style type="text/css">
body { font-family: Arial, sans; }
.box1, .box2, .box3 { width: 400px; height: 100px; background-size: 192px 192px; margin: 10px 10px 0px 0px; padding: 10px; }
.box1 { background: url("test1.svg"); }
.box2 { background: url("test2.svg"); }
.box3 { background: url("test3.svg"); }
.sml { width: 100px; height: 100px; margin: 10px 10px 10px 0px; }
</style>
</head>
<body>
<div class="box1">Test 1</div>
<div class="box2">Test 2</div>
<div class="box3">Test 3</div>
<img class="sml" src="test1.svg" type="image/svg+xml">
<img class="sml" src="test2.svg" type="image/svg+xml">
<img class="sml" src="test3.svg" type="image/svg+xml">
<embed class="sml" src="test1.svg" type="image/svg+xml">
<embed class="sml" src="test2.svg" type="image/svg+xml">
<embed class="sml" src="test3.svg" type="image/svg+xml">
</body>
</html>
working embedded image SVG
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:cc="http://web.resource.org/cc/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="192px" height="192px" viewBox="0 0 192 192">
<style type="text/css" id="style_css_sheet">
.orange { fill: #f9690e; }
.yellow { fill: #f1d40f; }
</style>
<defs>
<filter id="invert">
<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
</filter>
<rect id="box-bg" x="0" y="0" width="192px" height="192px" class="yellow" />
<rect id="box-fg" x="0" y="0" width="192px" height="192px" class="orange" />
<mask id="fg-mask" x="0" y="0" width="192px" height="192px" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image id="mask-img" width="192px" height="192px" filter="url(#invert)"
xlink:href="data:image/jpg;base64,
[[ DATA ]]"></image>
</mask>
</defs>
<use xlink:href="#box-bg" overflow="visible"></use>
<use xlink:href="#box-fg" mask="url(#fg-mask)" overflow="visible"></use>
</svg>
broken?? image xlink variant
<mask id="fg-mask" x="0" y="0" width="192px" height="192px" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image id="mask-img" width="192px" height="192px" filter="url(#invert)" xlink:href="http://bit.ly/1u61zrE"></image>
</mask>
So... Safari only likes the embed tags, chrome and firefox can do the background but only when the image is embedded as data. Any ideas on how to get Safari working, at least with the embedded data would be great. If there's a way to get them all working, even better...
Thanks.
For privacy reasons SVG-as-an-image must be complete in one file. Browsers will never support external references in SVG-as-an-image. The basic premise is that you can only do things with SVG-as-an-image that you could do with a raster image.
If you need external references use <object> or <iframe>
这篇关于背景图像带有使用外部图像不工作的掩码的SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
