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

Я использую Raphael JS (... он блестящий). Я просто хотел понять , как я могу добавить background-image и background-size (обложку) в мой путь SVG, который я создал с помощью Raphael. Возможно ли это?

Что я пробовал:

  • Я попытался добавить класс, но он добавляет его в SVG (родительский путь), поэтому я также попробовал svg path {//background properties, including the image I want to include;}

  • Я также изучал шаблоны, это сработало, но у моего вывода не было свойств фона, которые я хотел, поскольку я не был уверен, как установить их с шаблонами (background-image: //; и background-size: //;).

Текущий код (Raphael)

function myFunction() {
    var paper = Raphael("drama", 400,400);
    var c = paper.path("M24,48 L313,12L342,174L98,280Z").attr({fill: "url('../imgs/screen.png')", stroke: "none"});
}

Текущий выход рафаэля

<svg height="400" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <pattern id="1546A235-C4BA-4ED7-A544-C43CE0BA3109" x="0" y="0" patternUnits="userSpaceOnUse" height="1737" width="2880" patternTransform="matrix(1,0,0,1,0,0) translate(24,12)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <image x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../imgs/screen.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="2880" height="1737"></image>
        </pattern>
    </defs>
    <path fill="url(#1546A235-C4BA-4ED7-A544-C43CE0BA3109)" stroke="none" d="M24,48L313,12L342,174L98,280Z" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>

Ответы

Ответ 1

Регулировка ширины и высоты вашего pattern и тэга image должна сделать это.

Вы можете установить ширину и высоту на основе%, которые относятся к ширине и высоте SVG (а не к вашему пути).

В приведенной ниже демонстрационной версии используется квадратное изображение размером 500 * 500 пикселей, которое изменяется до 80% от ширины и высоты вашего SVG (= 320 * 320 пикселей).

Сценарий:

http://jsfiddle.net/4fo0rnfd/2/

Код SVG:

<svg height="400" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <pattern id="1546A235-C4BA-4ED7-A544-C43CE0BA3109" x="0" y="0" patternUnits="userSpaceOnUse" height="100%" width="100%" patternTransform="matrix(1,0,0,1,0,0) translate(24,12)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <image x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="//nl.gravatar.com/userimage/24668445/02be1fd7ba95a756c1f29e61738bd6a5.png?size=500" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="80%" height="80%"></image>
    </pattern>
</defs>
<path stroke="none" d="M24,48L313,12L342,174L98,280Z" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" fill="url(#1546A235-C4BA-4ED7-A544-C43CE0BA3109)"></path>
</svg>

Ответ 2

Можно ли добавить контейнер вокруг SVG?

Если да, вы можете использовать трюк с соотношением сторон, который первоначально считался для видео: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Вот еще одна статья по этому вопросу: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Должно быть возможно, чтобы SVG сохранял соотношение сторон, и вы могли бы добавить идеально подходящее фоновое изображение в родительском контейнере.

Это довольно хаки, но я бы попробовал. =)