将背景图像附加到嵌套的SVG元素
将背景图像附加到嵌套的SVG元素
提问于 2015-04-27 13:35:56
我试图在SVG中添加一个PNG或JPG背景图像。目前，在尝试多种不同的附加方法之后，背景图像将不会显示出来。
我使用的是jQuery.panzoom和jquery.svg (只有当我需要解决这个问题的时候)。
缩放和pan功能是为<g>元素工作的，该元素然后将其中的所有多边形和文本元素一起移动。我想要的是一个本质上附加到<g> (或<svg>)上的背景图像，这样当我移动<g>及其子程序时，它就会移动。(我知道不能将背景图像附加到<g>元素)。
基本SVG标记
我的SVG元素基本分组如下..。
<svg id="pnlShapes" width="640" height="480">
<svg id="shapes" width="640" height="480">
<g id="shapes-group" width="640" height="480">
<polygon id="svgSection_Floor" points="222.61,199.75,222.61,295.19,380.62,295.19,380.62,199.75,222.61,199.75,368.46,283.92,233.54,283.92,233.54,209.12,368.46,209.12,368.46,283.92" title="Floor" link="Primary" style="color: rgb(211, 211, 211); font-size: 0px; left: 0px; top: 0px; opacity: 0.82; fill: rgb(211, 211, 211); cursor: not-allowed;"></polygon>
<text x="302.61" y="289.4705" fill="white" font-size="9" font-weight="bold" text-anchor="middle">Floor</text>
<!-- plus a bunch more polygon and text element... -->
</g>
</svg>
</svg>我试过的..。
我尝试使用模式填充来附加背景图像。jsFiddle
<svg id="pnlShapes" width="640" height="480">
<defs xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg">
<pattern id="image" x="0" y="0" patternunits="userSpaceOnUse" height="480" width="640">
<image x="0" y="0" width="640" height="480" xlink:href="http://localhost:44000/Content/images/theImage.jpg"></image>
</pattern>
</defs>
<svg id="shapes" width="640" height="480" fill="url(#image)">
<g id="shapes-group" width="640" height="480">
<polygon id="svgSection_Floor" points="222.61,199.75,222.61,295.19,380.62,295.19,380.62,199.75,222.61,199.75,368.46,283.92,233.54,283.92,233.54,209.12,368.46,209.12,368.46,283.92" title="Floor" link="Primary" style="color: rgb(211, 211, 211); font-size: 0px; left: 0px; top: 0px; opacity: 0.82; fill: rgb(211, 211, 211); cursor: not-allowed;"></polygon>
<text x="302.61" y="289.4705" fill="white" font-size="9" font-weight="bold" text-anchor="middle">Floor</text>
</g>
</svg>
</svg>我还尝试使用jquery.svg来附加背景图像jsFiddle。
$('#shapes').svg();
var foo = $('#shapes').svg('get');
foo.filters.image(null, '', "http://localhost:44000/Content/images/theImage.jpg");
这里还有我的pan &缩放代码(使用jquery.panzoom)，如果有帮助的话：
var $section = $('#svg-container').first();
$section.find('g').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});最后的想法
如果使用插件是实现这一目标的最佳方法，那么我没有问题使用它。我只需要在<svg id="shapes">或该元素或<g>元素的内部有一个背景图像。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-04-27 14:21:06
SVG不支持CSS背景图像。您可以通过创建一个<rect>元素来模拟它，该元素作为第一个子元素占据整个空间。
<svg id="pnlShapes" width="640" height="480">
<defs>
<pattern id="image" patternUnits="userSpaceOnUse" height="480" width="640">
<image width="640" height="480" xlink:href="https://octodex.github.com/images/octoliberty.png"></image>
</pattern>
</defs>
<svg id="shapes" width="640" height="480">
<rect width="100%" height="100%" fill="url(#image)"/>
<g id="shapes-group">
<polygon id="svgSection_Floor" points="222.61,199.75,222.61,295.19,380.62,295.19,380.62,199.75,222.61,199.75,368.46,283.92,233.54,283.92,233.54,209.12,368.46,209.12,368.46,283.92" title="Floor" link="Primary" style="color: rgb(211, 211, 211); font-size: 0px; left: 0px; top: 0px; opacity: 0.82; fill: rgb(211, 211, 211); cursor: not-allowed;"></polygon>
<text x="302.61" y="289.4705" fill="white" font-size="9" font-weight="bold" text-anchor="middle">Floor</text>
</g>
</svg>
</svg>
Stack Overflow用户
发布于 2016-07-02 12:38:08
SVG确实对CSS背景图像有一些支持。对于上面的代码，您可以向<svg id="pnlShapes">添加背景图像，方法是：
<!DOCTYPE html>
<html>
<head>
<style>
#pnlShapes {
background-image: url('https://octodex.github.com/images/octoliberty.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>
</head>
<body>
<svg id="pnlShapes" width="640" height="480">
<svg id="shapes" width="640" height="480">
<g id="shapes-group" width="640" height="480">
<polygon id="svgSection_Floor" points="222.61,199.75,222.61,295.19,380.62,295.19,380.62,199.75,222.61,199.75,368.46,283.92,233.54,283.92,233.54,209.12,368.46,209.12,368.46,283.92" title="Floor" link="Primary" style="color: rgb(211, 211, 211); font-size: 0px; left: 0px; top: 0px; opacity: 0.82; fill: rgb(211, 211, 211); cursor: not-allowed;"></polygon>
<text x="302.61" y="289.4705" fill="white" font-size="9" font-weight="bold" text-anchor="middle">Floor</text>
<!-- plus a bunch more polygon and text element... -->
</g>
</svg>
</svg>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29897340
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号