全尺寸背景图像到SVG路径

Question

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

我尝试过的:

1. 我已经尝试添加一个类,但它将它添加到SVG(路径的父),所以我也尝试过 svg path {//background properties, including the image I want to include;}

2. 我也研究过模式,但是我的输出没有我想要的背景属性,因为我不知道如何用模式设置它们(background-image: //;和background-size: //;).

现行守则(拉斐尔)

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

小提琴:

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>

截图:

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保持纵横比,并且可以在父容器上添加完美拟合的背景图像.

这很hacky但是我试试看.=)