Блог

Главная - Вопросы по программированию - SVG с маской в качестве фона -изображение элемента HTML

SVG с маской в качестве фона -изображение элемента HTML

#css #svg #background-image #mask #css-transforms

#css #svg #background-изображение #маска #css-преобразования

Вопрос:

Я хочу использовать SVG в качестве background-image элемента HTML. Однако это не удается, когда я использую маску в любом месте SVG. При mask="url(#m)" удалении в приведенном ниже коде SVG отображается как фоновое изображение без проблем.

HTML:

 <div>Some element.</div>

JavaScript:

 // The following SVG is correctly rendered as a standalone SVG file, but not in `background-image`.
const svg = `<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="m" maskContentUnits="objectBoundingBox">
    <rect fill="white" x="0" y="0" width="100%" height="100%" />
  </mask>
  <rect mask="url(#m)" width="100" height="100" fill="red" />
</svg>`;

document.querySelector("div").style.backgroundImage = `url(data:image/svg xml;utf8,${encodeURIComponent(svg)}`;

(Ссылка JSFiddle)

Результат: нет фонового изображения

Ожидаемый результат: предполагаемое фоновое изображение

Возможно ли иметь маски SVG в background-image подобном виде? Если нет, в чем причина?

Соответственно, фоновое изображение также не отображается, если я добавляю style="transform: translate(0)" к svg (хотя другие стили, например style="background-color: blue" , работают без проблем). Можно ли использовать transform в SVG background-image ?

Ответ №1:

Ваш синтаксис неверен для URL-адреса данных

 document.querySelector("div").style.backgroundImage = `url('data:image/svg xml,${encodeURIComponent(svg)}')`;

это то, что вы хотите

 const svg = `<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="m" maskContentUnits="objectBoundingBox">
    <rect fill="white" x="0" y="0" width="100%" height="100%" />
  </mask>
  <rect mask="url(#m)" width="100" height="100" fill="red" />
</svg>`;

document.querySelector("div").style.backgroundImage = `url('data:image/svg xml,${encodeURIComponent(svg)}')`;  
 <div>Some element.</div>