Menu
I've been using Raphael JS (…it's brilliant). I was just wanting to understand how I can add a background-image and background-size (cover) to my SVG path I created with Raphael. Is this at all possible?
What I have tried:
I've tried adding a class, but it adds it to the SVG (parent of path), so then I also tried svg path {//background properties, including the image I want to include;}
I've also looked into patterns, this worked but my output didn't have the background properties I wanted, as I wasn't sure how to set them with patterns (background-image: //; and background-size: //;).
Current Code (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"});
}
Current Raphael Output
<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>
406
To display an image inside SVG circle, use the <circle> element and set the clipping path. The <clipPath> element is used to define a clipping path. Image in SVG is set using the <image> element.
SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF. All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.
Usage is simple — you insert the path to the image you want to include in your page inside the brackets of url() , for example: background-image: url('images/my-image. png');
Adjusting the width and height of both your pattern and your image tag should do it.
You can set a % based width and height, which are relative to the width and height of the SVG (not your path).
The demo below uses a square image of 500 * 500 pixels that is resized to 80% of the width and height of your SVG (= 320 * 320 pixels).
http://jsfiddle.net/4fo0rnfd/2/
<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>
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
