Я использую 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>