Question

我试图将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");

<小时/> 这是我的锅＆amp; amp;缩放代码（使用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>元素上有背景图片。

Answer 1

SVG不支持CSS背景图片。你可以通过创建一个占据整个空间的<rect>元素作为第一个孩子来模拟它，但

＆＃13;

<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>

＆＃13;

Answer 2

SVG确实支持CSS背景图片。对于上面的代码，您可以通过说：

将背景图像添加到<svg id="pnlShapes">

＆＃13;

<!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>

＆＃13;

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

基本SVG标记

我试过的......

最后的想法

2 个答案: