logo标签列表

将全尺寸背景图像转换为SVG路径

javascriptcsssvgbackground-imageraphael
17

我一直在使用 Raphael JS（…它很棒）。我只想知道如何在我用 Raphael 创建的 SVG 路径中添加 background-image 和 background-size （cover）。这有可能吗？

我尝试过的：

  1. 我尝试添加了一个 class，但是它添加到了 SVG（路径的父元素），于是我也尝试了 svg path {// 包括我想要的背景属性，包括图像；}

  2. 我还研究了一下 patterns，这个方法行得通，但我的输出没有我想要的背景属性，因为我不知道如何使用 patterns 设置它们（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>
分享一个JSFiddle。你甚至没有展示一张图片，而你的文字也不是自我解释的。对我来说，我无法理解你的问题。 - kwoxer
1
@kwoxer http://jsfiddle.net/wedLmfLs/ 我已经稍微修改了一下，但问题仍然存在。我只需要红框中的图像完美适配。另外还有几个例子：http://jsfiddle.net/8qudLkw0/1/ http://jsfiddle.net/8qudLkw0/ - WPZA
你的意思是图片应该像区域一样缩放。所以图片的拉伸是完全必要的吗？ - kwoxer
@Rahul，如果你想看到完整的图片，background-size:cover;是不够的。它会被裁剪并填满容器。 - web-tiki
请填写SVG路径元素的背景图像。祝你好运。 - Alexis B.
显示剩余2条评论
2个回答
10

调整您的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>

屏幕截图：

输入图像描述

如何使 SVG 中路径的宽度占据路径本身的100%，而不是整个 SVG？ - mesqueeb
6
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接