如何在SVG路径内添加图片？ [英] How to add image inside svg path?
本文介绍了如何在SVG路径内添加图片？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要将图像添加到SVG路径。我在某种程度上尝试过，但这是一个半生不熟的代码，图像没有采用SVG的适当形状。
这是它的HTML：
<div class="top-fold">
<div class="curve-img" id="shapeContainer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="564" viewBox="0 0 1280 564" preserveAspectRatio="none">
<defs>
<rect id="bg-a" width="1280" height="575"/>
<linearGradient id="bg-b" x1="50%" x2="71.552%" y1="-4.763%" y2="100%">
<stop offset="0%" stop-color="#FAFBFC"/>
<stop offset="100%" stop-color="#EBF3F9"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="bg-c" fill="#fff">
<use xlink:href="#bg-a"/>
</mask>
<path fill="url(#bg-b)" d="M0,0 L1280,0 L1280,465.166826 C1282.16971,484.337191 1283.83637,494.281583 1285,495 C1358.96463,540.665449 1275.63125,544.202225 1034,558.75895 C786.666667,573.659188 442,550.377565 0,488.914081 L0,0 Z" mask="url(#bg-c)"/>
</g>
</svg>
</div><!-- curve-img end -->
</div> <!-- top fold end -->
这是它的css。
.top-fold {
width: 100%;
position: relative;
height: 80vh;
}
.curve-img {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
top: 0;
left: 0;
z-index: 4;
}
#shapeContainer {
width: 100%;
height: 100%;
margin: auto;
background-image: linear-gradient(
to bottom,
rgba(255, 159, 63, 0.2),
rgba(255, 159, 63, 0.8)
),
url(https://www.nature.org/cs/groups/webcontent/@web/documents/media/2016-photocontest-yosemite-w-1.jpg);
background-size: cover;
background-position: center top;
overflow: hidden;
}
#shapeContainer svg {
display: block;
width: 100%;
height: 100%;
}
@media screen and (max-height: 400px) {
#shapeContainer {
background-size: auto 150%;
}
}
@media screen and (max-height: 200px) {
#shapeContainer {
background-size: auto 200%;
}
}
@media screen and (max-height: 100px) {
#shapeContainer {
background-size: auto 300%;
}
}
这里是供您参考的代码链接。https://codepen.io/enworl/pen/xPyMxL
提前感谢您的帮助。
推荐答案
您可能不喜欢补丁的非对称形式，它看起来就像您一样。
我更改了补丁的形式，但实际上，正如Paul所说，您需要从您那里获得一个布局，您想要什么。
新补丁代码：
<path d="M4 4 1278 0c1 137 0 330 0 420 0 89-304 140-639 139C399 557 1 518 3 427 4 355 4 4 4 4Z" fill="grey"/>
使用新补丁代码的应用程序：
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">.top-fold {
width: 100%;
position: relative;
height: 80vh;
}
.curve-img {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
top: 0;
left: 0;
z-index: 4;
}
#shapeContainer {
width: 100%;
height: 100%;
margin: auto;
background-image: linear-gradient(
to bottom,
rgba(255, 159, 63, 0.2),
rgba(255, 159, 63, 0.8)
),
url(https://www.nature.org/cs/groups/webcontent/@web/documents/media/2016-photocontest-yosemite-w-1.jpg);
background-size: cover;
background-position: center top;
overflow: hidden;
}
#shapeContainer svg {
display: block;
width: 100%;
height: 100%;
}
@media screen and (max-height: 400px) {
#shapeContainer {
background-size: auto 150%;
}
}
@media screen and (max-height: 200px) {
#shapeContainer {
background-size: auto 200%;
}
}
@media screen and (max-height: 100px) {
#shapeContainer {
background-size: auto 300%;
}
}<div class="top-fold">
<div class="curve-img" id="shapeContainer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="564" viewBox="0 0 1280 564" preserveAspectRatio="none">
<defs>
<rect id="bg-a" width="1280" height="575"/>
<linearGradient id="bg-b" x1="50%" x2="71.552%" y1="-4.763%" y2="100%">
<stop offset="0%" stop-color="#FAFBFC"/>
<stop offset="100%" stop-color="#EBF3F9"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="bg-c" fill="#fff">
<use xlink:href="#bg-a"/>
</mask>
<path fill="url(#bg-b)" d="M4 4 1278 0c1 137 0 330 0 420 0 89-304 140-639 139C399 557 1 518 3 427 4 355 4 4 4 4Z" mask="url(#bg-c)"/>
</g>
</svg>
</div><!-- curve-img end -->
</div> <!-- top fold end -->无垂直条纹
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">.top-fold {
width: 100%;
position: relative;
height: 80vh;
}
.curve-img {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
top: 0;
left: 0;
z-index: 4;
}
#shapeContainer {
width: 100%;
height: 100%;
margin: auto;
background-image: linear-gradient(
to bottom,
rgba(255, 159, 63, 0.2),
rgba(255, 159, 63, 0.8)
),
url(https://www.nature.org/cs/groups/webcontent/@web/documents/media/2016-photocontest-yosemite-w-1.jpg);
background-size: cover;
background-position: center top;
overflow: hidden;
}
#shapeContainer svg {
display: block;
width: 100%;
height: 100%;
}
@media screen and (max-height: 400px) {
#shapeContainer {
background-size: auto 150%;
}
}
@media screen and (max-height: 200px) {
#shapeContainer {
background-size: auto 200%;
}
}
@media screen and (max-height: 100px) {
#shapeContainer {
background-size: auto 300%;
}
}<div class="top-fold">
<div class="curve-img" id="shapeContainer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1280" height="564" viewBox="0 0 1280 564" preserveAspectRatio="none">
<defs>
<rect id="bg-a" width="1280" height="575"/>
<linearGradient id="bg-b" x1="50%" x2="71.552%" y1="-4.763%" y2="100%">
<stop offset="0%" stop-color="#FAFBFC"/>
<stop offset="100%" stop-color="#EBF3F9"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="bg-c" fill="#fff">
<use xlink:href="#bg-a"/>
</mask>
<path fill="url(#bg-b)" d="M-0.4 0.4 1282 0c0.9 137.1-0.5 330.3-0.5 419.6 0 89.3-307.6 140.5-643.3 138.7C398.7 557.1-2.5 518.2-1.1 426.8 0.1 354.6-0.4 0.4-0.4 0.4Z" mask="url(#bg-c)"/>
</g>
</svg>
</div><!-- curve-img end -->
</div> <!-- top fold end -->这篇关于如何在SVG路径内添加图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
