全尺寸背景图像到SVG路径

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>

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 :

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