笔画可以用作 SVG 中剪辑路径的一部分吗?

2023-11-30

我正在编写 MuPDF 的 SVG 输出,并且遇到了 SVG 功能的限制。我想我会在这里问,以防这是已知解决方法的已知问题(或者万一我做了一些愚蠢的事情!)

我有以下 SVG:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="21.59cm" height="27.94cm" viewBox="0 0 600 600">
<path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
<clipPath id="cp0">
<path stroke-width="12" fill="none" stroke="#000000" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
</clipPath>
<g clip-path="url(#cp0)">
<rect fill="#ff0000" x="0" y="0" width="600" height="600"/>
</g>
</svg>

这会绘制一条描边路径(形状像蓝色的“[”)。然后它将相同的路径设置为剪切路径,并将剪切路径填充为红色。

我希望将剪切路径设置为路径的描边版本,因此红色形状将完全覆盖蓝色形状。然而,在我的测试中,路径的“填充或描边”被忽略,并且路径被“填充” - 因此我在蓝色形状内绘制了一个红色正方形。

有没有办法获得我所希望的行为?或者我是否必须编写代码来手动展平和描边路径,然后再将其输出到 SVG?

预先感谢您的回复!


svg 中的剪辑路径只是形状,而不是形状的特征,因此换句话说,您不会包含笔划。您可以做的是使用蒙版,将蒙版中路径的描边设置为白色。

Here's 一个例子:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 600">
  <defs>
    <mask id="m0" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600">
      <path fill="none" stroke="white" stroke-width="5" d="M 150 300 L 80 300 L 80 370 L 150 370" />
    </mask>
  </defs>

  <path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
  <g mask="url(#m0)">
    <rect fill="yellow" x="0" y="0" width="600" height="600" />
  </g>
</svg>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

笔画可以用作 SVG 中剪辑路径的一部分吗? 的相关文章

  • 如何在 d3.js 中填充 svg 圆圈内的图像

    这是我在 svg 中填充圆圈的代码 var svgContainer d3 select body append svg attr width 1000 attr height 1000 var circles svgContainer s
  • ie11 中的 SVG 问题

    我有一个 div 其高度设置为 320 像素 然后它的子元素宽度设置为 100 它的子文件是一个 SVG 文件 我将其宽度设置为容器的 200 在运行良好的 Chrome 和 Firefox 中 我得到了如下所示的漂亮图像 HTML 看起来
  • 角度错误:冲突:多个资源向同一文件名 file.svg 发出不同的内容

    我有这个css in my component scss file bg background url assets images file svg center center no repeat 并且该路径中只有一个 svg 文件 因此每
  • D3.以编程方式缩放后使用鼠标滚轮时缩放会跳转

    当我通过单击鼠标缩放到特定位置然后尝试平移或使用鼠标滚轮时 缩放行为会跳跃 看来我的缩放级别正在恢复 就像单击鼠标之前一样 这是我的事件处理程序 function click d var x y k if d centered d var
  • 动画持续时间不准确

    我在 SVG 中创建了加载微调器 但动画持续时间不准确 例如 30 秒动画持续时间 实际 26 秒 动画持续时间 45 秒 实际持续时间 38 秒 60 秒动画持续时间 实际 51 秒 我很绝望 不知道哪里可能出错 你能帮助我吗 1 旋转器
  • 如何在 d3.js 中的节点上制作双击事件?

    我想在节点上进行双击事件 所以我尝试了 on dbclick function d return http google com and bind dbclick function d alert hello 但一切都失败了 谁能帮我 完整
  • 如何在 blaze-html 中渲染 blaze-svg 标记

    我想将使用 blaze svg 生成的 svg 图直接包含在使用 blaze html 生成的 html 中 两者都基于 blaze markup 所以我希望它很容易 diagram1 Svg diagram1 try1 Html try1
  • 如何制作一条带有边框的 SVG“线”?

    我有一个小 svg 小部件 其目的是显示角度列表 参见图片 现在 角度是线元素 只有描边 没有填充 但现在我想要一个 内部填充 颜色和周围的 描边 边框 我猜 line 元素无法处理这个问题 那么我应该使用什么来代替呢 请注意 线条笔划的线
  • 可以在 d3.js 中使用具有固定圆圈大小的圆圈包布局吗?

    此圆形包布局示例 http bl ocks org 4063269 http bl ocks org 4063269 非常适合我正在从事的项目 但是它会调整所有圆圈相对于彼此的大小 有没有一种简单的方法来指定每个圆的固定半径 我已经搜索了源
  • SVG 文本在 IE 中消失,直到我单击它

    我在 Internet Explorer Edge 以 Win7 上的为准 中遇到与 SVG 创建和操作相关的问题 在我正在开发的应用程序中 我们使用 d3 生成 SVG 形式的图形 在 Chrome 和 Firefox 中 它们工作得很好
  • For 循环不适用于 JavaScript 动画

    我正在尝试编写一个 for 循环 以在单击形状按钮时重复 爆炸 路径的动画 但 for 循环无法工作 执行 而且我看不出哪里出了问题 for循环的目的 循环动画路径的过程 然后将动画反转回其原始路径 我知道问题出在 for 循环中的某个地方
  • 自 JRE 1.7.0_25 起,Batik 无法进行转换

    自从我更新到 JAVA 1 7 0 25 以来 蜡染在应用转换时会抛出异常 堆栈跟踪是 java awt image ImagingOpException Unable to transform src image at java awt
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • SVG 到 Android 形状 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 旋转嵌套 SVG

    我在用SVG js http svgjs com并尝试使用 SVG 进行一些操作 我以前使用过 canvas 但我对其生成的图像质量非常失望 因此我决定使用纯 SVG 我设法将所有内容都改为纯 SVG 方法 除了一件事 旋转 我无法让它发挥
  • 矩形上的文本会消除矩形的悬停效果

    我有几个具有悬停效果的 svg 矩形 当鼠标悬停在矩形上时 矩形的背景颜色会发生变化 悬停效果通过css设置 myclass hover fill rgb 255 128 0 除此之外 文本放置在每个矩形上方 一对文本和矩形定义一个组
  • 使用 SVG 多边形元素

    我正在尝试使用 SVG 多边形和 javascript 我创建一个多边形并设置其初始点列表 如下所示 var polygon document createElementNS http www w3 org 2000 svg polygon
  • SVG 极坐标渐变

    我是 SVG 的初学者 但我想学习一些技术 简而言之 有没有一种简单的方法来创建这样的东西 我正在考虑创建一个极坐标渐变 然后裁剪它 但是如何生成极坐标梯度呢 即使没有本地方法 也许可以用简单的线性渐变然后使用一些直角极坐标变换来实现 有办
  • SVG 以 % 为单位旋转文本

    我尝试旋转 svg 文本 我通过从 xslt 调用 php 函数来获取文本的位置 即 15 问题是我无法使用 旋转 svg 对象 如果我使用数字来代替 它就可以了 下面我将问题简化

随机推荐

  • 如何比较两个日期时间字符串并返回小时数差异? (bash外壳)

    我可以使用以下代码在 php 中做到这一点 dt1 2011 11 11 11 11 11 t1 strtotime dt1 dt2 date Y m d H 00 00 t2 strtotime dt2 tDiff t2 t1 hDiff
  • 禁用鼠标中键单击

    我需要您帮助解决一个问题 即如何禁用鼠标中键单击任何链接以在 IE 7 8 9 中打开新选项卡 我尝试过很多类似的事情 return false e cancelBubble true e returnValue false 但无法阻止 I
  • 当一个 @Controller 扩展另一个 @Controller 时,“发现不明确的映射”

    我有一个ImportAction类 用作多个特定于类型的导入控制器的父类 例如ImportClientsAction and ImportServicesAction ImportAction是一个带有注释的 Spring MVC Cont
  • 无法加载资源:服务器响应状态为 409

    自动 WordPress 更新后 插件表单 联系表单 7 现在在其下方显示斜杠 并且不再触发 wpcf7mailsent 侦听器事件 因此在提交表单后不再将其重定向到感谢页面 此错误 服务器响应状态为 409 或也称为 net ERR AB
  • 在加载包含超过 6000 个项目的列表时,ConstraintLayout 与 RecyclerVIew (ListAdapter) 似乎会使用大量内存(高达 1GB)

    我正在为我的应用程序构建一个简单的 FileExplorer 并使用协程获取给定路径中的文件 并在显示它们时 内存使用量出现峰值 我在帖子底部显示了探查器工具选项卡 我最好的猜测是 适配器正在为列表中的每个项目创建一个视图持有者 并且使用应
  • C 中的 Double For 循环语法

    我是 C 新手 必须编写一些模拟给定函数的代码 但是 我很难明确地理解这段代码中的第二个 for 循环正在做什么 该语法似乎不遵循以下循环语法的标准 for init condition increment statement s 这是我正
  • Pandas-通过对列和索引的值求和来合并两个数据帧

    我想按索引和列合并两个数据集 我想合并整个数据集 df1 pd DataFrame 1 0 0 0 2 0 0 0 3 columns 1 2 3 df1 1 2 3 0 1 0 0 1 0 2 0 2 0 0 3 df2 pd DataF
  • 希望在 SVG 元素上结合 CSS 填充颜色和 SVG 图案

    我想利用 CSS 的强大功能来结合两件事来设计 SVG 元素的样式 填充颜色和纹理 我的纹理是使用具有描边但没有填充的 SVG 图案创建的 但即使该图案没有填充 它仍然不允许通过笔划看到 CSS 填充颜色 http jsfiddle net
  • iOS 中的 Facebook 分享对话框

    我正在努力实施本机共享对话框来自 Facebook 的示例应用程序 这样做似乎有些问题 到目前为止我所做的事情 包含最新的 Facebook SDK 包括 AdSupport 社交 帐户 安全和 libsqlite3 dylib 添加了来自
  • jQuery Sortable - 事件被调用太多次

    我有一个 x 类列表 该列表中有许多 y 类列表 可以将项目从任何子列表拖动到任何其他子列表 也可以安排子列表本身的顺序 我正在努力应对通过可排序触发的事件 接收 仅当某些内容从其他地方带入列表时才会触发 因此对于在子列表中排列项目或排列子
  • 为什么我的绝对/固定位置元素没有位于我期望的位置?

    我刚刚学习CSS中的定位 根据我发现有用的文章 我开始尝试 使用以下代码 我无法理解为什么绝对灰盒 div 位于其相对父级之外 我预计灰盒将位于容器的左上角 container background lightblue position r
  • Swift 泛型和协议不适用于 UIKit [可能的错误]

    TL DR gt 滚动到底部 在尝试使用 Swift 面向协议编程来标记 Apple 时 我在尝试实现类之间的委托模式时偶然发现了以下问题 我将从这个例子开始 protocol PhotoHandlerParent class UIView
  • 获取图标128*128文件类型C#

    我需要获取文件类型 doc 或 txt 的图标 它的大小应为 128 128 并以良好的质量保存为 png 或 ico 文件 I used Icon ico Icon ExtractAssociatedIcon d 1 txt pictur
  • 如何从 python 集中删除自定义对象的实例?

    我正在用 python 进行一些基本的卡 牌组操作 下面你可以看到我的 Card 类和 Deck 类 假设我知道有些牌已经死了 并且想将它们从牌组中删除 import itertools SUIT LIST h s d c NUMERAL
  • 设置 Java 线程的优先级

    我有一个在几个线程中运行的程序 主线程与其他线程共享一个对象 在主线程中我调用了 synchronized obj do stuff 我怀疑主线程饥饿并且无法访问obj 如何提高主线程的优先级或者默认情况下它已经高于其他线程 Thread
  • Java:Swing:按下按钮后隐藏框架

    我在 java 框架中有一个按钮 按下该按钮时 它会从文本字段读取一个值 并使用该字符串作为尝试连接到串行设备的端口名称 如果连接成功 该方法返回 true 否则返回 false 如果它返回 true 我希望框架消失 然后将出现其他类中指定
  • 使用 OpenCSVSerde 时,hive 无法读取字符斜杠

    我在 hdfs 中的文件顶部定义了一个表 我正在使用 OpenCSV Serde 从文件中读取 但是 数据中的 斜杠字符在最终结果集中被省略 是否有我没有正确使用的 hive serde 属性 根据文档 escapeChar 应该可以解决这
  • 错误:被调用的对象不是函数或函数指针

    我有以下代码 z x y 1 printf d z z x y 2 x y printf d z z x y x y printf d z z 2 x y x y printf d z 我收到此错误消息 10 11 error called
  • Python 中的八皇后问题

    Python 中的 8 皇后问题 你好 我才开始教Python 所以有人可以解释下面写的代码 在互联网上找到的 吗 有些代码对我来说很复杂 请解释一下 谢谢 问题就在代码附近 BOARD SIZE 8 def under attack co
  • 笔画可以用作 SVG 中剪辑路径的一部分吗?

    我正在编写 MuPDF 的 SVG 输出 并且遇到了 SVG 功能的限制 我想我会在这里问 以防这是已知解决方法的已知问题 或者万一我做了一些愚蠢的事情 我有以下 SVG