程序员经验分享-hwhale

如何将 SVG 中的路径数据变形为另一个路径数据？

2023-12-10

我试图弄清楚为什么它不会将此路径数据变形为另一个路径数据，我需要使其看起来像真正的动画。

这是我的 SMIL 代码：

    <animate xlink:href="#Barra3"  
    repeatCount="indefinite" 
    attributeName="d" 
    dur="5s"
    values="M52,346L56,346C61.523,346 66,350.477 66,356L42,356C42,350.477 46.477,346 52,346Z;
    M54,225C60.627,225 66,230.373 66,237L66,356L42,356L42,237C42,230.373 47.373,225 54,225Z;"/>

这是我的代码笔：

https://codepen.io/joannesalfa/pen/mdPBJxq然后转到第 181 行。我正在使用 SMIL。


当尝试改变 svg 中的路径时，最重要的是 d 属性具有相同数量的命令和相同的命令。我重写了短路径，以便绘制形状侧面的线条的长度 = 0。



M54,346
C60.627,346,66,351.373,66,358
L66,358L42,358L42,358
C42,351.373,47.373,346,54,346Z

请看一下：

svg{border:solid}
<svg viewBox="5 200 100 200" width="100">


  <path d="M54,346
          C60.627,346,66,351.373,66,358
          L66,358L42,358L42,358
          C42,351.373,47.373,346,54,346Z"  stroke="red" fill="gold" >

  <animate  dur='5s'
    attributeType="XML"
    attributeName='d'      
    repeatCount='indefinite'
           values="M54,225
           C60.627,225 66,230.373 66,236
           L66,356L42,356L42,236
           C42,230.373 47.373,225 54,225Z;
                                                                     
           M54,346
           C60.627,346,66,351.373,66,356
           L66,356L42,356L42,356
           C42,351.373,47.373,346,54,346Z;
                                                                                  M54,225
           C60.627,225 66,230.373 66,236
           L66,356L42,356L42,236
           C42,230.373 47.373,225 54,225Z" />
    
    </path>
</svg>

Update

OP 评论道：

您介意如何逐步重写短路径吗？我发现这让我很困惑

我正在采用这两条路径，并将它们分成 5 条不同颜色的路径，每个命令对应一条路径。请注意，我必须在每条路径的开头添加移动到命令 (M)。移动到的值是上一个路径的最后一个点。这些线是蓝色的路径。

对于短路径，您可以在代码中看到那些蓝色路径，但在 svg 中看不到，因为它们的长度为 0。我需要那些 0 长度的线，因为长路径中有线。

svg{width:200px;border:solid;overflow:visible; fill:none}
<svg viewBox="40 220 28 140" >
  <desc>The short path</desc>
  <path d="M54,346 C60.627,346,66,351.373,66,356" stroke="red" /> 
  <path d="M66,356 L66,356" stroke="blue" />           
  <path d="M66,356 L42,356" stroke="green" />    
  <path d="M42,356 L42,356" stroke="blue" /> 
  <path d="M42,356 C42,351.373,47.373,346,54,346" stroke="gold"/>

</svg>

<svg viewBox="40 220 28 140" >
  <desc>The long path</desc>
      <path d="M54,225 C60.627,225 66,230.373 66,237" stroke="red"/> 
      <path d="M66,237 L66,356" stroke="blue" />
      <path d="M66,356 L42,356" stroke="green" />  
      <path d="M42,356 L42,237" stroke="blue"/>
      <path d="M42,237 C42,230.373 47.373,225 54,225;" stroke="gold"/>

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

Animation

SVG

mathematicalmorphology

如何将 SVG 中的路径数据变形为另一个路径数据？ 的相关文章

  • CSS 可见性动画不起作用

    我想在 CSS 可见性属性上制作基于关键帧的动画 我最初在 显示 上尝试过 但发现不支持 显示 上的动画 但支持 可见性 这个想法是让矩形的可见性不断切换 我不想使用 jquery 并且想在 CSS 中实现整个它 以下是我的代码 但它没有给

  • 从左到右显示 SVG 动画

    我有两个 SVG 图像 我想将它们设置为动画 如下所示 首先显示Full Screen文本从左到右 然后用第二个 SVG 覆盖该单词Screen显示整个第二个 SVG 因此 最后我将得到第二个 svg 中的单词 Full 黑色空间 以及单词

  • Angular svg不同实例共享相同的defs

    我有一个角度组件 我在其中使用 def 更改电池 svg 状态填充

  • 在 C、C++ 中实现腐蚀、膨胀

    我对二值图像的膨胀是如何完成的有理论上的了解 AFAIK 如果我的 SE 结构元素 是这样的 0 1 1 1 在哪里 代表中心 我的图像 二进制是这样的 0 0 0 0 0 0 1 1 0 0 0 1 0 0 0 0 1 0 0 0 0 0

  • 在 SVG 中绘制 DOM 对象时如何在 Canvas 中使用 Google 字体？

    根据 Mozilla 的文档 您可以在 Canvas 上绘制复杂的 HTML 例如this https developer mozilla org en US docs Web API Canvas API Drawing DOM obje

  • 创建响应式 SVG 剪辑路径 / 使 SVG 响应式

    我正在尝试使用创建响应式 SVG 剪辑路径

  • IPython Notebook Markdown——允许的 HTML 标签列表是什么以及如何更改它们？

    我正在使用 IPython Notebook markdown 创建一个文档 它确实允许一些 HTML 例如 img 例如但我添加了包含 SVG 文件 但它不会显示在 IPython Notebook 输出中 我仔细检查了 IPython

  • SVG 文本元素上的 CSS 转换在 Safari 中不起作用

    尝试在父 SVG 中放置电池指示器 SVG

  • 以编程方式显示 UIView

    我试图 通过动画 显示 UIView 具体来说 我想显示视图的中心部分 然后慢慢地显示它的外边缘 有点像拉开窗帘 我的第一次尝试是简单地将边界矩形设置得更小 并将其动画化为视图框架的完整大小 但这没有达到预期的效果 因为通过更改边界 我也更

  • 如何随着 ViewPager 位置偏移量的变化对视图进行动画处理

    我们希望创建一个带有动画的应用程序介绍 用户可以在其中滚动页面 并且当用户滚动时 视图会动画化并遍历所有幻灯片 动画视图应该随着用户滚动而移动 因此如果用户滚动得更快 动画视图应该移动得更快 如果用户滚动回到上一页 动画视图应该向后移动 这

  • 弹簧质量系统的阻尼效果（或者这是 ElasticEase？）

    我试图在代码中模拟动画效果 几乎任何语言都可以 因为它看起来是数学而不是语言 本质上 它是质量弹簧系统的仿真 我一直在研究 WPF Silverlight 的ElasticEase这似乎与我正在寻找的非常接近 但又不完全一样 首先 这就是我

  • 使用 d3 进行多级/分组轴标签

    我想知道是否有一种简单的方法可以在 d3 中添加多级 分层 分组轴标签 例如 如果我有一个折线图 其中 x 轴的月份名称跨越多年 那么我还希望将年份作为月份名称下方的标签 因此它看起来像这样 Oct Nov Dec Jan Feb Mar

  • 背景颜色变化

    SolidColorBrush bgColor public ModernBTN InitializeComponent this Loaded delegate object sender RoutedEventArgs e bgColo

  • 无法在 Firefox 中显示我的 svg 图像？

    我无法在 Firefox 中显示我的 svn image 它在 Safari 和 Chrome 中工作正常 没有 IE 所以还没有测试过 它在我的html中是这样实现的 img 类 logo1 src images logo6 svg 其中

  • 为什么媒体查询中的 CSS 旋转不会旋转回来

    我有一个 SVG 其中一些元素根据媒体查询进行旋转 如下所示 media max width 480px rect transform rotate 10deg 该元素旋转得很好 但 至少在 Chrome 中 它拒绝返回 这是为什么 其他指

  • 使用 css 变换在其父对象的宽度上对对象进行动画处理

    我正在尝试使用 css 转换来转换 100 宽度包装器内元素的位置来提高动画性能 因此 它从左侧进入屏幕并从右侧退出 然后重复动画 我想我可以在这个动画中使用百分比 我发现翻译与您正在制作动画的对象相关 因此 如果您有一个 100px 宽的

  • 2 个 SVG 路径的交集

    我需要检查两个 SVG Path 元素是否相交 检查边界框与 getBBox 太不准确了 我目前正在做的是迭代两条路径 getTotalLength 然后检查是否有两个点 getPointAtLength 是平等的 下面是一个片段 但正如您

  • 分配函数后如何删除 onmouseout 事件？

    我有一个问题 我正在为 onmouseout 事件分配一个函数 但运行该事件后 我需要将其删除 将非常感谢您的帮助 这取决于你的代码 如果你用 d3 这样做 那么你可以说 在 onmouseout 事件函数中 element on mous

  • 如何在 html 5 画布上旋转单个对象？

    我试图弄清楚如何在 html 5 画布上旋转单个对象 例如 http screencast com t NTQ5M2E3Mzct http screencast com t NTQ5M2E3Mzct 我希望每一张卡都能以不同的角度旋转 到目

  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在

随机推荐

  • 将 ImageSharp 作为字段添加到 MarkdownRemark 节点（不是 frontmatter）

    我正在尝试执行以下 graphQL 查询 allMarkdownRemark limit 1000 edges node id parent id fields slug hero childImageSharp fixed src

  • 文本前后的行没有响应[重复]

    这个问题在这里已经有答案了 我试图在文本之前和之后各添加一行 但我希望它能够响应 目前我能找到的唯一方法是使用宽度 所以它不响应 我更愿意仅在伪元素之前和之后使用 但如果不可能 那么我会发现另一种方法 HTML div class sect

  • 将文件输出存储到变量中

    我想将文本文件的输出存储到一个变量中 这样我就可以将整个文件作为参数传递 我使用的是Windows 2003 Server 文本文件有多行 例如 10 20 210 100 fish 10 20 210 101 rock 我正在使用 Set

  • Android：如何检查是否启用了特定的 AccessibilityService

    我编写了一个 Android 应用程序 需要使用AccessibilityService 我知道如何检查手机上是否启用或禁用了辅助功能 但我无法找到一种方法来确定我的应用程序是否已在辅助功能菜单中专门启用 我想提示用户如果Accessibi

  • Scanf 将输入的字符串解析为字符数组

    我想在两个单独的数组中解析用户输入 使用 scanf g 编译没有错误 但出现内存访问错误 核心转储 德语 Speicherzugriffsfehler Speicherabzug geschrieben char top 10 char

  • Firebase 按字符搜索

    我在我的 firebase 应用程序中使用 FirebaseRecyclerAdapter 直到现在我仍然不知道如何在 Firebase 中按字符搜索 我已经使用了查询 并且得到了很好的结果 但它不可用 这是我想要的数据库搜索 这是我使用它

  • Excel 中的排列

    我有一个有 6 个空格的字符串 例如000000 每个空格可以容纳三位数字之一 0 1 或 2 我知道使用 Excel 中的 Permut 函数总共可以获得 120 种排列 即 PERMUT 6 3 120 但我会实际上喜欢在单元格中进行每

  • C# 相对路径不从工作目录开始

    我有一个 C 程序 它将从相对路径读取文件 report report1 rdlc 但是有时由于未知原因它从完全不同的位置找到了该文件C Windows system32 report report1 rdlc但该文件实际上位于C Prog

  • 客户端的 ASP.NET MVC 多对多模型

    我有 3 个多对多表 Users lt UserRoles gt Roles 我这样设置我的模型 public class User public int UserId get set public IEnumerable

  • 设置 JetBrains YouTrack 以连接到 SVN

    我意识到 TeamCity 一定是 YouTrack 和 SVN 之间的桥梁 但我不需要 Teamcity 的任何功能 我只想通过提交评论发出 Youtrack 命令像这儿 http confluence jetbrains net dis

  • TypeScript 中的“keyof typeof”是什么意思？

    向我解释一下什么keyof typeof在 TypeScript 中的意思是 Example enum ColorsEnum white ffffff black 000000 type Colors keyof typeof Colors

  • bash while循环删除文本文件的最后一行[重复]

    这个问题在这里已经有答案了 当我 cat 这个文件时 我得到 6 行 它是一个 diff 文件 bash 3 00 cat tmp voo 18633a18634 gt sashabSTP 18634a18636 gt sashatSTP

  • 该项目存在于数组中，但它说数组长度为 0？

    我可以将一个项目添加到数组中 并且我可以访问该项目 但是length报告0 Why var arr arr 4294967300 My item console log arr 4294967300 arr length Outputs M

  • 有没有办法使用CSS使用文本作为背景？

    我想使用动态文本作为标签中某些元素的背景 因此 我可以使用图像 动态文本 如何仅使用 CSS 或 JavaScript 来做到这一点 SVG 文本背景图像 body background image url data image svg x

  • 在匹配的正则表达式的一部分上分割字符串（python）

    假设我有一个字符串 ad gt ad gt ad gt gt ad 我想就此分开 gt 不是 gt gt 字符 刚刚拿起正则表达式 想知道是否有一种方法 特殊字符 可以分割匹配表达式的特定部分 而不是分割整个匹配表达式 例如正则表达式可以是

  • 升级到 G++ 4.8 - exception_ptr.h 不支持异常传播

    我正在尝试使用 g 4 8 重新编译一个巨大的遗留应用程序 以便调试glibc detected memory corruption问题 使用 AddressSanitizer 之前我们使用的是 g 4 4 7 但是 编译失败并显示 opt

  • 如何构建 IEnumerable.Contains() 表达式？

    我目前第一次使用 ASP 动态数据 并尝试构建一个过滤器 我们的用户需要根据项目是否是所选父项的子项 我们的项目可以有多个父项 来定位列表中的项目 所讨论的项目是 Segment 每个 Segment 都有一个名为 RouteIds 的属性

  • MySQL 相当于 MS SQL 交叉应用

    如果您习惯了 MS SQL 交叉应用 那么您可能想知道如何在 MySQL 中完成同样的事情 我发现反问句并认为直接的问题可能会帮助任何搜索如何将此功能从 MS SQL 迁移到 MySQL 的人 在此示例中 交叉应用允许您修改字段并在同一查询

  • 正则表达式批量搜索替换

    我想在 Windows 批处理中使用正则表达式模式对一组文件进行搜索 替换 它会是这样的 if the regex matches a line matches then replace it with a new line 我还需要在正则

  • 如何将 SVG 中的路径数据变形为另一个路径数据？

    我试图弄清楚为什么它不会将此路径数据变形为另一个路径数据 我需要使其看起来像真正的动画 这是我的 SMIL 代码

热门标签