如何在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%;
}
}
这是codepen链接供您参考。 https://codepen.io/enworl/pen/xPyMxL
提前感谢您的帮助。
2 个答案:
答案 0 :(得分：1)
你可能不喜欢补丁的不对称形式，这就是你的样子。
我改变了补丁的形式，但实际上，正如保罗所说，你需要一个你想要的布局。
新补丁代码：
<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"/>
使用新补丁代码的应用程序：
.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 -->
有必要删除垂直条带，以某种方式改变形式，设计？我们正在等待您的布局和描述。
没有垂直条纹
.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 -->
答案 1 :(得分：0)
你的样本中有很多，我不确定。很多问题与你的问题的主要内容无关，即有一个弯曲底部的面具。
无论如何，创建蒙版实际上非常简单。请参阅下面的示例。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.top-fold {
position: relative;
width: 100%;
height: 80vh;
}
.curve-img {
position: absolute;
height: 100%;
width: 100%;
}
#shapeContainer svg {
display: block;
width: 100%;
height: 100%;
}<div class="top-fold">
<div class="curve-img" id="shapeContainer">
<svg>
<defs>
<mask id="bg-c" maskContentUnits="objectBoundingBox">
<path fill="white"
transform="scale(0.000781, 0.001742)"
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>
</defs>
<image xlink:href="https://www.nature.org/cs/groups/webcontent/@web/documents/media/2016-photocontest-yosemite-w-1.jpg"
width="100%" height="100%" preserveAspectRatio="xMidYMid slice" mask="url(#bg-c)"/>
</svg>
</div><!-- curve-img end -->
</div> <!-- top fold end -->
请注意，对于HTML内容应用蒙版仍然存在一些怪癖，因此目前最简单的方法是将图像放入SVG中。
我已从SVG中移除了viewBox和preserveAspectRatio="none"，因为我们希望它可以在不扭曲图像的情况下与其父级进行扩展。
我们还将掩码切换为使用objectBoundingBox个单位，以便无论最终的大小如何，它都适合图像。
如果您需要在顶部进行橙色渐变清洗，您可以这样做。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.top-fold {
position: relative;
width: 100%;
height: 80vh;
}
.curve-img {
position: absolute;
height: 100%;
width: 100%;
}
#shapeContainer svg {
display: block;
width: 100%;
height: 100%;
}<div class="top-fold">
<div class="curve-img" id="shapeContainer">
<svg>
<defs>
<mask id="bg-c" maskContentUnits="objectBoundingBox">
<path fill="white"
transform="scale(0.000781, 0.001742)"
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>
<linearGradient id="bg-b" x2="0" y2="1">
<stop offset="0%" stop-color="rgba(255, 159, 63, 0.2)"/>
<stop offset="100%" stop-color="rgba(255, 159, 63, 0.8)"/>
</linearGradient>
</defs>
<g mask="url(#bg-c)">
<image xlink:href="https://www.nature.org/cs/groups/webcontent/@web/documents/media/2016-photocontest-yosemite-w-1.jpg"
width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
<rect width="100%" height="100%" fill="url(#bg-b)"/>
</g>
</svg>
</div><!-- curve-img end -->
</div> <!-- top fold end -->
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？