SVG, связанный с HTML, не отображает фоновый рисунок - PullRequest
Новая
       33

SVG, связанный с HTML, не отображает фоновый рисунок

0 голосов
/ 04 февраля 2020

Я пытаюсь поместить растровое изображение на задний план SVG и отобразить SVG-элементы поверх него. Мои файлы

1) размер растрового изображения 300x145 (background.jpg)

2) файл SVG (2.svg), в который встроено растровое изображение, а dr aws пересекает его

3) файл HTML (тест. html), который связывает файл изображения.

И background.png, и 2.svg отображаются Firefox нормально, если они открыта напрямую. Но когда файл SVG связан с файлом HTML, браузер отображает только элементы SVG, а не фоновый рисунок. - Почему?

В качестве обходного пути я вставлю SVG в HTML, но лучше не будет.

2.svg: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewPort="0 0 300px 145px"
    viewBox="0 0 300px 145px">
    <defs>
      <style>
        svg {
          width: 300px;
          height: 145px;
          background-image: url(background.jpg);
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      </style>
    </defs>
    <path d="M 0 0 l 300 145 " stroke="black"/>
    <path d="M 0 145 l 300 -145 " stroke="black"/>
  </svg>

test. html: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head> 
    <meta charset="utf-8">
</head>
<body>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewPort="0 0 300px 145px"
    viewBox="0 0 300px 145px">
    <defs>
      <style>
        svg {
          width: 300px;
          height: 145px;
          background-image: url(background.jpg);
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        path {
          fill: transparent;
        }
      </style>
    </defs>
    <path d="M 0 0 l 300 145 " stroke="black"/>
    <path d="M 0 145 l 300 -145 " stroke="black"/>
  </svg>

<img src="2.svg" />
</body>

Результат в окне браузера: result.png

Работает для встраивания SVG как внешнего объекта, как в 

<div style="width:100%"><object type="image/svg+xml" data="EG.svg" width="100%"></object></div>

Я до сих пор понятия не имею, почему.

...