程序员经验分享-hwhale

如何在 svg 路径中​​添加图像？

2024-01-08

我想将图像添加到 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 https://codepen.io/enworl/pen/xPyMxL

在此先感谢您的帮助。


您可能不喜欢补丁的不对称形式，这就是您的样子。

我改变了补丁的形式，但实际上，正如保罗所说，你需要一个布局，你想要得到什么。

新补丁代码：

<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 -->
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

SVG

frontend

如何在 svg 路径中​​添加图像？ 的相关文章

随机推荐

  • 如何从MySQL旧密码升级到新密码系统

    我在 mysql server 5 0 中有很多用户 权限 我想将它们全部转移到新的 MySQL 服务器 5 5 中 但密码是旧格式 在 mysql user 表中 所以我想将所有旧密码转换为新格式 有没有办法在不更改MySQL密码的情况下

  • 如何使用 Azure DocumentDB 执行 UPSERT？

    Azure DocumentDB 不支持 UPSERT 是否有合理的解决方法来实现相同的功能 使用存储过程检查文档是否存在以确定是否应该执行插入或更新是否是一种有效的策略 如果我需要批量执行数千个这样的操作怎么办 在这里为该功能投票 htt

  • Android ASync 任务 ProgressDialog 在后台线程完成之前不会显示

    我有一个 Android 活动 它从 URL 获取 RSS 提要 并使用 SAX 解析器将 XML 中的每个项目粘贴到数组中 这一切都工作正常 但正如预期的那样 需要一些时间 所以我想使用 AsyncActivity 在后台执行此操作 我的

  • Android 中的 sendStickyBroadcast 和 sendBroadcast 有什么区别

    有什么区别sendStickyBroadcast and sendBroadcast在安卓中 Android SDK 是这么说的sendStickyBroadcast http developer android com reference

  • 从 ASP.NET 应用程序将文件直接上传到 Amazon S3

    我的 ASP NET MVC 应用程序将占用大量带宽和存储空间 如何设置 ASP NET 上传页面 以便用户上传的文件将直接发送到 Amazon S3 而不使用我的 Web 服务器的存储和带宽 2016 年 2 月更新 AWS SDK 现在

  • Angular 2：使用函数生成路由链接/动态生成routerLink

    我想动态创建路线链接 我已经随页面加载了 html 但是 我需要在 URL 中使用 id 该 id 稍后可用 HTML a href Add Content to Cartoon Box a 此路由链接中的链接包含卡通盒的 id carto

  • 如何在Windows 7中控制和调节音量？

    我想在C Win Form中控制和调整Windows 7的音量 任何提示 这是如何做到的 看看这里 http www geekpedia com tutorial176 Get and set the wave sound volume h

  • 从时间戳列中选择日期范围

    目前我的表有一列用于存储日期和时间 该列的数据类型是没有时区的时间戳 所以它的值格式为 2011 09 13 11 03 44 537 我需要检索与日期有关的行 如果我使用 select from table where mdate gt

  • 如何在特定日期用 PHP 和 MySQL 发送邮件？

    我在用PHP and MySQL 我正在尝试发送邮件 但无法正常工作 我想检查两个日期并在特定日期发送邮件 if isset POST mail sub selectDate select from insurance data query

  • wordpress - 使自定义字段值可单击以便稍后检索

    我想在 WordPress 管理面板的所有帖子页面添加一个自定义列 场景是 每个帖子都有一个特色图片 当我查看管理面板中的所有帖子页面时 我有一个自定义列 即 并且每行都有值 我想单击特定行的列值以使其被选中并具有不同的外观 即粗体字体 然

  • HotJar 如何生成他们的录音？

    跟踪鼠标移动 滚动 单击事件很容易 但它们如何保存屏幕并保持同步 页面渲染得非常好 至少对于静态 HTML 页面 尚未在 Angular 或任何 SPA 上进行测试 同步几乎是完美的 要生成并上传 23fps 的屏幕录制 1920x1080

  • Snakemake 通配符：使用目录输出中的通配符文件

    我是 Snakemake 的新手 并尝试在规则中使用特定文件 来自directory 克隆 git 存储库的另一个规则的输出 目前 这给了我一个错误Wildcards in input files cannot be determined

  • Browserify 不起作用 - 为什么？

    我将以下代码浏览到bundle js 并将其包含在我的前端 在加载任何其他 js 文件之前 我浏览器化的文件就是这样的 var firebase require firebase 然后 我在前端包含的下一个文件中对该变量调用authoriz

  • 如何在 Intellij Idea 中使用自定义 sbt 版本？

    我有一个 scala sbt 项目 当我在 intellij 中打开终端并执行 sbt sbtVersion 时 我看到 0 13 8 我想使用我自己的本地安装版本 0 13 5 当我打开新的命令提示符时 我看到 sbt 版本是 0 13

  • 托管身份 - 如何在本地调试

    我正在使用以下代码在我的 Web 应用程序上测试系统托管身份 当我在 Azure 中部署时它工作正常 但有没有办法在本地进行测试 无需向我的 Azure 帐户授予该资源的权限 AzureServiceTokenProvider azureS

  • 由 NullPointerException 引起的一般错误 [50000-175]

    我在客户端 服务器模式下使用 H2 数据库 服务器运行版本为 1 3 175 客户端运行版本为 1 3 168 一切似乎工作正常 但执行一些查询时出现异常 org h2 jdbc JdbcSQLException 一般错误 java lan

  • Java中如何移动数组中的位置？

    一个简单地移动数组元素的程序 两个变量 userInputVariable and blankSpaceVariable 我有一个名为 table 的二维数组 定义为table userInputVariable 1 6 我以表格格式打印这

  • 如何在类中正确实现 Set 作为属性？

    假设我有以下示例 TDelphiIDECompatibility Delphi1 Delphi2 Delphi3 从类中 我如何将上述内容正确实现为属性 我的想法是 在我的组件中 我希望有一个字段 允许您为集合中的某些元素选择 True 或

  • 如何在重定向到另一个页面之前显示加载图像？

    我有一个要加载的图像 我正在使用 onclick 方法进行重定向 因此当有人单击 div 时 会将他们带到另一个页面 当页面重定向到另一个图像时 我如何能够加载 loading gif 图像 我真的很想使用它 因为这对用户更加友好 而且我的

  • 如何在 svg 路径中​​添加图像？

    我想将图像添加到 SVG 路径 我在某种程度上尝试过 但它是一个半生不熟的代码 并且图像没有采用正确的 SVG 形状 下面是该内容的 HTML div class top fold div class curve img div div

热门标签