javascript - 全尺寸背景图像到 SVG 路径

Question

我一直在使用 Raphael JS(……它很棒)。我只是想了解如何将 background-image 和 background-size (cover) 添加到我的 SVG 路径 我与拉斐尔一起创作。这有可能吗？

我尝试过的:

1. 我已经尝试添加一个类，但它会将它添加到 SVG(路径的父级)，所以我也尝试了 svg path {//background 属性，包括我想要包含的图像;}

2. 我也研究了模式，这很有效，但我的输出没有我想要的背景属性，因为我不确定如何使用模式设置它们 (background-image://; 和 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"});
}

当前的拉斐尔输出

<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

调整 pattern 和 image 标签的宽度和高度就可以了。

您可以设置基于 % 的宽度和高度，它们与 SVG(不是您的路径)的宽度和高度相关。

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

fiddle :

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

---

SVG代码:

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

截图: