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: //;andbackground-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="" xmlns: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="" 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>
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: //;andbackground-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/2000/svg" xmlns:xlink="http://www.w3/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/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>
- Share a JSFiddle. You not even showing a picture and your text is not self explaining. For me I didn't get your issue. – kwoxer Commented Jun 27, 2015 at 15:45
- 1 @kwoxer jsfiddle/wedLmfLs I've changed it a bit now, but it's still the same problem. I just need the image in the red box to fit perfectly. Another few examples: jsfiddle/8qudLkw0/1 jsfiddle/8qudLkw0 – WPZA Commented Jun 27, 2015 at 21:55
- You mean the picture should scale like the area. So streching of the image is totally needed? – kwoxer Commented Jun 28, 2015 at 8:20
- @kwoxer Yes, so you can see the full image perfectly fitted inside that area. – WPZA Commented Jun 29, 2015 at 8:55
-
@Rahul if you want to see the full image,
background-size:cover;won't do. It will be cropped and fill the container pletely. – web-tiki Commented Jul 20, 2015 at 10:25
2 Answers
Reset to default 10 +25Adjusting 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).
The Fiddle :
http://jsfiddle/4fo0rnfd/2/
The SVG code :
<svg height="400" version="1.1" width="400" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/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/1999/xlink" xlink:href="//nl.gravatar./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>A screenshot :
Is it an option to add a container around the SVG?
If yes, you could use the aspect-ratio trick originally thought for videos: http://alistapart./article/creating-intrinsic-ratios-for-video
Here is another article on the matter: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
It should be possible to have the SVG keeping the aspect-ratio and you could add a perfectly fitting background-image on the parent-container.
This is quite hacky but I'd give it a try. =)