Прикрепить фоновое изображение к вложенному элементу SVG

Я пытаюсь добавить фоновое изображение 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> элемент.

Источник

2 ответа

Решение

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>

Источник

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>

Источник
Другие вопросы по тегам