全尺寸背景图像到 SVG 路径

Posted 2023-03-06

【中文标题】全尺寸背景图像到 SVG 路径

【英文标题】：Full size background-image to SVG path

【发布时间】：2015-09-13 19:52:38

【问题描述】：

我一直在使用 Raphael JS（……太棒了）。我只是想了解如何将background-image 和background-size (cover) 添加到我使用 Raphael 创建的 SVG 路径中。这有可能吗？

我尝试过的：

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

我也研究了模式，这可行，但我的输出没有我想要的背景属性，因为我不确定如何使用模式设置它们（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  version="1.1"  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"   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);"  ></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 jsfiddle.net/wedLmfLs 我现在改了一点，但还是一样的问题。我只需要红色框中的图像完美契合。再举几个例子：jsfiddle.net/8qudLkw0/1jsfiddle.net/8qudLkw0

你的意思是图片应该像区域一样缩放。所以完全需要对图像进行拉伸？

@kwoxer 是的，这样您就可以看到完美适合该区域的完整图像。

@Rahul 如果您想查看完整图像，background-size:cover; 不会。它将被裁剪并完全填满容器。

【参考方案1】：

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

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

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

应该可以让 SVG 保持纵横比，并且您可以在父容器上添加完美匹配的背景图像。

这很hacky，但我会试一试。 =)

【参考方案2】：

调整pattern 和image 标签的宽度和高度应该可以做到。

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

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

小提琴：

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

---

SVG 代码：

<svg  version="1.1"  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"   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);"  ></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？