Full size background-image to SVG path

Question

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:

1. 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;}

2. 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>

Wholewheat

Share a JSFiddle. You not even showing a picture and your text is not self explaining. For me I didn't get your issue. – Modla

@Modla jsfiddle.net/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.net/8qudLkw0/1 jsfiddle.net/8qudLkw0 – Wholewheat

You mean the picture should scale like the area. So streching of the image is totally needed? – Modla

@Modla Yes, so you can see the full image perfectly fitted inside that area. – Wholewheat

@Rahul if you want to see the full image, background-size:cover; won't do. It will be cropped and fill the container completely. – Beebread

#3796525 Hope it will help you. Good Luck' – Honorific

I'd just use <mask> with current path and crop the background image. – Nikolos

Answer 1

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).

The Fiddle :

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

---

The SVG code :

<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>

A screenshot :

Jonejonell

How can I make a path inside an SVG be 100% of the width of the path instead of the SVG? – Falsetto

Answer 2

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.com/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. =)

Ormand