javascript - Full size background-image to SVG path - Stack Overflow

admin管理员组

文章数量:1245057

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="" 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:

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

• javascript
• css
• svg
• background-image
• raphael

Share Improve this question Follow edited Feb 10, 2016 at 12:41 John Slegers 47.1k2323 gold badges204204 silver badges173173 bronze badges asked Jun 26, 2015 at 18:56 WPZAWPZA 93111 gold badge1010 silver badges2727 bronze badges 7

• 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

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 10 +25

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

本文标签： javascriptFull size backgroundimage to SVG pathStack Overflow