全尺寸背景图像到SVG路径

Question

我一直在使用Raphael JS（......很棒）。我只是想了解如何在我使用Raphael创建的SVG路径中添加background-image和background-size （封面） 。这有可能吗？

我尝试了什么：

1. 我尝试过添加一个类，但是它将它添加到SVG（路径的父级），所以我也尝试了svg path {//background properties, including the image I want to include;}

2. 我也研究过模式，但是我的输出没有我想要的背景属性，因为我不知道如何用模式设置它们（background-image: //;和{{ 1}}）。

现行守则（拉斐尔）

background-size: //;

目前的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"});
}

Answer 1

调整pattern和image标记的宽度和高度应该可以。

您可以设置基于％的宽度和高度，它们相对于SVG的宽度和高度（而不是您的路径）。

下面的演示使用500 * 500像素的方形图像，其大小调整为SVG宽度和高度的80％（= 320 * 320像素）。

小提琴：

<强> http://jsfiddle.net/4fo0rnfd/2/

SVG代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

截图：

Answer 2

是否可以在SVG周围添加容器？

如果是，您可以使用最初为视频设想的宽高比技巧：http://alistapart.com/article/creating-intrinsic-ratios-for-video

以下是关于此事的另一篇文章：http://www.mademyday.de/css-height-equals-width-with-pure-css.html

应该可以让SVG保持宽高比，并且可以在父容器上添加完美贴合的背景图像。

这很狡猾，但我试试看。 =）