将背景图像附加到嵌套的 SVG 元素答案

【问题标题】：Attach background image to nested SVG element将背景图像附加到嵌套的 SVG 元素
【发布时间】：2015-07-06 00:00:42
【问题描述】：

我正在尝试将 PNG 或 JPG 背景图像附加到 SVG。目前，在尝试了多种不同的附加方法后，背景图像没有显示出来。

我正在使用jQuery.panzoom 和jquery.svg（仅当我需要解决这个问题时）。

缩放和平移功能适用于 <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");

如果有帮助，这也是我的平移和缩放代码（使用 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> 元素上有一个背景图像。

【问题讨论】：

标签： jquery svg jquery-svg jquery.panzoom

【解决方案1】：

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>

【讨论】：

效果很好。我将<rect> 移动到<g> 元素内，因此在拖动和缩放时包含它。谢谢！
这个解决方案比它需要的更复杂。您无需使用模式将图像添加到矩形。只需使用图像。 jsfiddle.net/ss4ba5ox

【解决方案2】：

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>

【讨论】：

这是因为这里的根 <svg> 元素实际上被浏览器视为 HTML 元素。但这只是特殊处理，因为它位于 HTML 文档中。一般情况下这是不正确的。例如，这在独立的 SVG 中不起作用，如果您尝试将背景图像应用于内部 <svg> 元素，它将不起作用。