程序员经验分享-hwhale

带有蒙版的 svg 在 chrome 上看不到

2023-12-29

我正在尝试使用 React 动态创建的一些 svg 路径进行掩码。问题是生成的 html 代码无法立即在 Chrome 和 Safari 上正确呈现。调整浏览器窗口大小或从检查器中选中/取消选中样式属性时会出现正确的结果。我觉得问题出在其中之一-webkit属性，但无法定义哪些属性。尝试过-webkit-mask，但没有给出任何结果。这是应该立即呈现的 html 结构：

<div>
  <div id="type-1-areas-container">
    <div class="drawArea" id="draw-area-type-1-area-0" style="z-index: 1;">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100%; height: 100%; top: 0px; left: 0px;">
        <mask id="mask"><rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
          <svg class="path-svg type-1-area" id="type-1-area-0" xmlns="http://www.w3.org/2000/svg" transform="scale(1)" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;">
            <path id="type-1-area-0-path" class="svg-path type-1-area-path" d="M127.796875,155C132.95551452636718,162.82513122558595,138.23039932250975,168.82151107788087,142.18780517578125,172.16754150390625S150.95073318481445,176.28356399536133,154.17958068847656,177.30686950683594S161.0159019470215,179.71168899536133,163.7134552001953,178.9895782470703S169.75318450927733,178.6121047973633,172.16326904296875,172.4927978515625S179.8039924621582,147.7889892578125,179.7806854248047,138.19419860839844S175.28107757568358,115.13227272033691,172.0078887939453,108.52752685546875S164.28795928955077,96.4549690246582,157.9594268798828,94.16255950927734S134.72670631408693,93.14690742492675,129.8176727294922,93.24479675292969S128.5356559753418,90.80187454223633,125.23253631591797,94.81515502929688S107.4122241973877,110.97227325439454,107.796875,120S122.63823547363282,147.17486877441405,127.796875,155" style="fill: rgb(0, 0, 0); stroke: rgb(255, 255, 0); stroke-width: 2px; stroke-linejoin: miter; stroke-linecap: round;"></path>
          </svg>
        </mask>
      </svg>
    </div>
  </div>
  <div id="type-2-areas-container">
    <div class="drawArea" id="draw-area-type-2-area-0" style="z-index: 0;">
      <svg class="path-svg type-2-area" id="type-2-area-0" xmlns="http://www.w3.org/2000/svg" transform="scale(1)" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;">
        <path id="type-2-area-0-path" class="svg-path type-2-area-path" d="M114.796875,179C114.14320793151856,178.26720504760743,105.84552307128907,165.58406829833984,110.43909454345703,174.1147003173828S134.835990524292,220.88421707153321,145.42068481445312,235.87088012695312S170.70931396484374,265.35510711669923,181.00372314453125,274.0257873535156S206.31416854858398,289.6967575073242,214.05007934570312,293.6754150390625S225.51683044433594,299.6501159667969,232.5764617919922,300.5501708984375S254.67742385864258,301.13958129882815,261.1142883300781,299.67578125S271.82720336914065,295.42576599121094,275.4888916015625,290.79150390625S282.5870529174805,277.52045288085935,285.5255432128906,268.78070068359375S293.53660736083987,240.60151138305665,295.0788269042969,232.5264892578125S296.2962417602539,220.4813331604004,295.8070068359375,214.9472198486328S300.125959777832,208.6973476409912,291.8172607421875,195.6324005126953S252.8830108642578,142.17305183410645,240.41567993164062,127.84757232666016S218.41261672973633,106.83093719482422,208.70172119140625,100.12920379638672S189.46759185791015,85.5236831665039,175.67637634277344,83.16934967041016S129.72834587097168,83.31731033325195,116.76028442382812,84.43364715576172S94.4289478302002,87.4200668334961,89.2226333618164,90.6115951538086S82.60472297668457,99.19609413146972,82.05152130126953,105.71050262451172S83.84109344482422,127.42914161682128,85.53462219238281,134.04098510742188S88.95237503051757,143.0456069946289,93.34171295166016,149.78945922851562S111.57860069274902,174.61841888427733,114.796875,179S115.45054206848144,179.73279495239257,114.796875,179" style="stroke: rgb(186, 112, 0); stroke-width: 2px; stroke-linejoin: miter; stroke-linecap: round; fill: rgb(186, 112, 0); fill-opacity: 0.3;" mask="url(#mask)"></path>
      </svg>
    </div>
  </div>
</div>

同样，在静态模式下，当将此 HTML 代码放置在 codepen 或 jsfiddle 中时，我不会遇到渲染问题，但当使用鼠标动态绘制 mask 元素内的路径时，就会出现问题。如果没有遮罩，动态绘制的路径将不会出现任何问题。已经尝试过：

1）反应forceReload()假设问题与 mask 元素内的路径有关<path id="type-1-area-0-path" ....></path>出现在路径引用掩码之后<path id="type-2-area-0-path" d="M114.796875,..." ... mask="url(#mask)"></path>

2）使用CSS代替内联掩码属性mask and -webkit-mask特性。

谁能给我提示在哪里寻找解决方案？


对于来到此页面的任何人，我都有同样的问题，我发现可以用以下方法修复mask-size and -webkit-mask-size.

在你的 CSS 中执行此操作：

width: 100%;
height: 100%;
mask-size: cover;
-webkit-mask-size: cover;
background-color:#000;
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

ReactJS

SVG

mask

带有蒙版的 svg 在 chrome 上看不到 的相关文章

随机推荐

  • 如何让Intellij Idea显示编译警告？

    我正在使用 Intellij Idea 10 和 Java 6 JDK Update 7 当我运行时Build gt Rebuild Project命令 并且 javac 编译生成警告 Idea不显示what这些警告正是在Messages看

  • 使用 Jquery、AJAX 和 PHP 从 MySQL 数据库检索数据

    我试图弄清楚如何使用对 PHP 页面的 AJAX 调用从 MySQL 数据库检索数据 我一直在关注这个教程 http www ryancoughlin com 2008 11 04 use jquery to submit form htt

  • Webview“mailto：”链接和“tel：”链接使用 Intent.ACTION_VIEW 工作，但如何为“mailto：”链接添加唯一的主题

    我已经得到了这个工作 因为它应该使用以下代码 所有 http url 按应在 Web 视图中打开 tel 链接按应在拨号程序中打开 mailto 链接按应在电子邮件客户端中打开 但我的问题是如何将 mailto 链接的主题更改为不同的主题而

  • 为什么 Powershell 环境路径与系统环境路径不同？

    我遇到了这种奇怪的情况 我的用户和系统的 PATH 变量与 powershell 中的 PATH 不同 当我做 PS C env path C Windows System32 WindowsPowerShell v1 0 c oldpat

  • MongoDB 的 TypeORM 错误：.find() 不起作用，错误：TypeError: 无法读取未定义的属性“原型”

    我按照描述设置了 Nest Js TypeORM MongoDB 堆栈here https medium com chnirt how do i practice with nestjs nestjs typeorm mongodb 9e4

  • 为什么我无法连接到 Gremlin 服务器？

    Abstract 我正在尝试在 Docker v1 13 0 中设置 Titan Cassandra Gremlin Server 堆栈 我面临的问题是应用程序尝试在默认端口上连接到 Gremlin Server8182正在报告错误 详细信

  • Java String.split 是否有可能返回 null String[]

    是否有可能split返回 nullString 我很好奇 因为我想在我的代码中尽可能地采取防御措施 而不进行不必要的检查 代码如下 String parts myString split w 在使用之前我需要执行空检查吗parts后分裂 它

  • Android Webview：有没有办法知道之前的URL是什么？

    有没有办法访问历史记录 以便我知道用户按下后退按钮 调用 WebView goBack 时正在访问哪个 URL String historyUrl myWebView WebView findViewById R id webViewCon

  • CLR 检测到无效程序

    需要任何帮助 想法来解决这个问题 我们正在开发一个应用程序 该应用程序可以调用 SAP 以使用 ERPConnect 发布一些数据 我们在 WCF 服务的实体框架调用之一中遇到以下问题 我们使用的是 NET4 0 Win 2008 Serv

  • 使用 purrr 地图打印 ggplot

    我想创建ggplots for numeric cols反对我的response variable 这是可重现的代码 test mpg gt select if is numeric gt dplyr select year gt nest

  • Java char Array - 删除元素

    在 Java 中 我想从 char 数组中删除某些元素 因此它会执行以下操作 char Array1 h m l e l l Array1 character index 2 to character index 5 如何才能做到这一点 在

  • JIRA 与 TortoiseSVN 集成

    谁能指定将 JIRA 与 TortoiseSVN 集成以跟踪问题详细信息的方法吗 URL部分应该指定什么URL 还需要哪些其他参数 您需要在 JIRA 方面做些什么来确保集成吗 在阅读有关该主题的 TortoiseSVN 文档时 我遇到了很

  • 如何在 Amazon-S3 和 Google Cloud Storage 之间执行文件完整性检查

    我正在将数据从 Amazon S3 迁移到 Google Cloud Storage 我已经使用复制了我的数据gsutil https cloud google com storage docs gsutil gsutil cp R s3

  • 按所包含对象的属性拆分 Java ArrayList

    我有一个ArrayList包含具有日期值的对象 现在我想设法创建一个新的ArrayList包含主对象中所有对象的每一年ArrayList其日期值具有相同的年份 因此 2010 年的所有对象都放在一个列表中 1999 年的所有对象都放在另一个

  • winform中的activex

    我需要在我的 Net WinForm 中放入一些activeX 提供商向我发送了 tlb 和 com dll 这够了吗 怎么把它放到winform上呢 这应该足够了 您需要在计算机上注册该 dll 将其添加到 dev studio 工具箱

  • 移动远程分支

    After 重写提交树以重命名作者并更改电子邮件 https stackoverflow com questions 750172 how do i change the author of a commit in git 我的本地存储库和

  • 出于未知原因读取串行端口块

    我正在尝试在 Linux 下使用 termios 框架通过 UART usbserial 连接非接触式智能卡读卡器 该代码在 PC 上运行良好 但当我交叉编译并在 ARM9 目标上尝试时 它能够打开设备 甚至可以将命令写入设备 但读取命令会

  • javascript 对 HTML 元素进行排序

    我正在尝试排序li元素并得到意想不到的结果 我需要排序三遍才能正确 我哪里搞错了 javascript var sort by name function a b return a innerHTML toLowerCase gt b in

  • NavigationLink 在按钮内不起作用

    我添加了一个 ToolBarItemGroup 和一个应该导航到另一个视图的按钮 但在这种情况下 带有 navigationLink 的按钮不起作用 这是因为我无法将 navigationLink 添加到 toolbar VStack Na

  • 带有蒙版的 svg 在 chrome 上看不到

    我正在尝试使用 React 动态创建的一些 svg 路径进行掩码 问题是生成的 html 代码无法立即在 Chrome 和 Safari 上正确呈现 调整浏览器窗口大小或从检查器中选中 取消选中样式属性时会出现正确的结果 我觉得问题出在其中

热门标签