程序员经验分享-hwhale

在 SVG 路径中对 SVG 进行动画处理

2024-04-21

我已经构建了一个路径动画，但 svg 中的锯片有问题。

我想要为 Sawblade 制作动画（360 度旋转）。

    <style>html {
  background-color: #337ab7;
}

.cutline {
  stroke: #222;
  stroke-width: .1%;
  stroke-width: .5%;
  stroke-dasharray: 1% 2%;
  stroke-linecap: round;
  fill: none;
}

.sawblade {
  fill: #eee;
  width: 200px;
  height: auto;
  margin: 30px;
}
</style>
<svg viewBox="0 0 3387 1270">
  <path id="cutline" class="cutline" d="M 2700 1000 L 100 1000 " />
<g class="sawblade">
  <path id="sawblade" d="M1089.22,696.4s15.26-47.61-89.24-73.22c-1.24-.3-2.45-.58-3.65-.84,20.57-19,50.83-37.45,85.5-28.49,0,0,2.29-50-105.27-47.38-1.2,0-2.36.08-3.51.13C988,523,1012.33,497.42,1048,497c0,0-10.8-48.82-114-18.32l-1.63.49c8.62-26.2,25.66-55.9,59.27-65.14,0,0-22.88-44.46-114.87,11.33-1.1.66-2.15,1.32-3.18,2,1.12-28,9.45-62.41,40.3-80.6,0,0-33.69-36.94-107.93,40.94-.82.87-1.62,1.72-2.39,2.57-6.15-27.25-7-62.55,18-88.07,0,0-42.16-26.89-93.55,67.63-.27.51-.53,1-.8,1.5-12.43-24.62-21.38-57.66-4.15-88,0,0-47.61-15.25-73.22,89.24-.3,1.24-.58,2.46-.84,3.65-19-20.57-37.45-50.82-28.49-85.49,0,0-50-2.3-47.38,105.26,0,1.2.08,2.37.13,3.52-23.62-14.93-49.18-39.29-49.56-75,0,0-48.82,10.79-18.32,114,.16.55.32,1.09.49,1.62-26.2-8.61-55.9-25.66-65.14-59.27,0,0-44.46,22.88,11.33,114.88q1,1.64,2,3.18c-28-1.12-62.42-9.46-80.6-40.31,0,0-36.94,33.7,40.94,107.93.86.83,1.72,1.62,2.57,2.4-27.25,6.15-62.55,7-88.07-18,0,0-26.89,42.15,67.63,93.54l1.5.8c-24.62,12.44-57.66,21.38-88,4.15,0,0-15.26,47.62,89.24,73.22,1.24.31,2.46.58,3.65.85-20.57,19-50.82,37.44-85.49,28.49,0,0-2.3,49.94,105.26,47.37,1.2,0,2.37-.07,3.52-.13-14.93,23.63-39.29,49.19-75,49.57,0,0,10.79,48.82,114,18.32l1.62-.5c-8.61,26.21-25.66,55.9-59.27,65.14,0,0,22.88,44.46,114.88-11.32,1.09-.67,2.15-1.33,3.18-2-1.12,28-9.46,62.42-40.31,80.6,0,0,33.7,36.94,107.93-40.93.83-.87,1.62-1.73,2.4-2.58,6.15,27.26,7,62.56-18,88.07,0,0,42.15,26.89,93.54-67.63.28-.51.54-1,.8-1.5,12.44,24.62,21.38,57.67,4.15,88,0,0,47.62,15.26,73.22-89.24.31-1.24.58-2.45.85-3.65,19,20.57,37.44,50.83,28.49,85.5,0,0,49.94,2.29,47.37-105.27,0-1.2-.07-2.36-.13-3.51,23.63,14.92,49.18,39.28,49.57,75,0,0,48.82-10.8,18.32-114-.16-.55-.33-1.09-.5-1.63,26.21,8.62,55.9,25.66,65.14,59.27,0,0,44.46-22.88-11.32-114.87-.67-1.1-1.33-2.15-2-3.18,28,1.12,62.42,9.46,80.6,40.31,0,0,36.94-33.7-40.93-107.94-.87-.82-1.73-1.62-2.58-2.39,27.26-6.15,62.56-7,88.07,18,0,0,26.89-42.16-67.63-93.55l-1.5-.8C1025.87,688.12,1058.92,679.17,1089.22,696.4Zm-442.7-23.46a53.14,53.14,0,1,1,53.14,53.14A53.15,53.15,0,0,1,646.52,672.94Z" transform="translate(-309.32 -282.6)"/>
  </g>

  <!-- Define the motion path animation -->
  <animateMotion xlink:href="#sawblade" dur="2s" repeatCount="indefinite" rotate="auto" >
    <mpath xlink:href="#cutline" />
  </animateMotion> 
</svg>

你能帮我吗？


您可以将这两个动画放入需要设置动画的元素内。我在用<animateTransform>旋转锯片并<animateMotion>在路径上移动锯片。或者，您可以在这里翻译形状。

我稍微改变了路径，因为我想消除translate。实际上我已经使用过这个工具：将 SVG 路径转换为全部相对或全部绝对 https://codepen.io/leaverou/pen/RmwzKv由 Lea Verou 将路径更改为小写命令。接下来，我根据用于翻译的量修改了路径的起点。

html {
  background-color: #337ab7;
}

.cutline {
  stroke: #222;
  stroke-width: .1%;
  stroke-width: .5%;
  stroke-dasharray: 1% 2%;
  stroke-linecap: round;
  fill: none;
}

.sawblade {
  fill: #eee;
  width: 200px;
  height: auto;
  margin: 30px;
}
<svg viewBox="0 0 3387 1270">
  <path id="cutline" class="cutline" d="M 2700 1000 L 100 1000 " />
<g class="sawblade" >
  <path id="sawblade" d="M779.9,413.8s15.26,-47.61,-89.24,-73.22c-1.24,-0.3,-2.45,-0.58,-3.65,-0.84c20.57,-19,50.83,-37.45,85.5,-28.49c0,0,2.29,-50,-105.27,-47.38c-1.2,0,-2.36,0.08,-3.51,0.13c14.95,-23.6,39.28,-49.18,74.95,-49.6c0,0,-10.8,-48.82,-114,-18.32l-1.63,0.49c8.62,-26.2,25.66,-55.9,59.27,-65.14c0,0,-22.88,-44.46,-114.87,11.33c-1.1,0.66,-2.15,1.32,-3.18,2c1.12,-28,9.45,-62.41,40.3,-80.6c0,0,-33.69,-36.94,-107.93,40.94c-0.82,0.87,-1.62,1.72,-2.39,2.57c-6.15,-27.25,-7,-62.55,18,-88.07c0,0,-42.16,-26.89,-93.55,67.63c-0.27,0.51,-0.53,1,-0.8,1.5c-12.43,-24.62,-21.38,-57.66,-4.15,-88c0,0,-47.61,-15.25,-73.22,89.24c-0.3,1.24,-0.58,2.46,-0.84,3.65c-19,-20.57,-37.45,-50.82,-28.49,-85.49c0,0,-50,-2.3,-47.38,105.26c0,1.2,0.08,2.37,0.13,3.52c-23.62,-14.93,-49.18,-39.29,-49.56,-75c0,0,-48.82,10.79,-18.32,114c0.16,0.55,0.32,1.09,0.49,1.62c-26.2,-8.61,-55.9,-25.66,-65.14,-59.27c0,0,-44.46,22.88,11.33,114.88q1,1.64,2,3.18c-28,-1.12,-62.42,-9.46,-80.6,-40.31c0,0,-36.94,33.7,40.94,107.93c0.86,0.83,1.72,1.62,2.57,2.4c-27.25,6.15,-62.55,7,-88.07,-18c0,0,-26.89,42.15,67.63,93.54l1.5,0.8c-24.62,12.44,-57.66,21.38,-88,4.15c0,0,-15.26,47.62,89.24,73.22c1.24,0.31,2.46,0.58,3.65,0.85c-20.57,19,-50.82,37.44,-85.49,28.49c0,0,-2.3,49.94,105.26,47.37c1.2,0,2.37,-0.07,3.52,-0.13c-14.93,23.63,-39.29,49.19,-75,49.57c0,0,10.79,48.82,114,18.32l1.62,-0.5c-8.61,26.21,-25.66,55.9,-59.27,65.14c0,0,22.88,44.46,114.88,-11.32c1.09,-0.67,2.15,-1.33,3.18,-2c-1.12,28,-9.46,62.42,-40.31,80.6c0,0,33.7,36.94,107.93,-40.93c0.83,-0.87,1.62,-1.73,2.4,-2.58c6.15,27.26,7,62.56,-18,88.07c0,0,42.15,26.89,93.54,-67.63c0.28,-0.51,0.54,-1,0.8,-1.5c12.44,24.62,21.38,57.67,4.15,88c0,0,47.62,15.26,73.22,-89.24c0.31,-1.24,0.58,-2.45,0.85,-3.65c19,20.57,37.44,50.83,28.49,85.5c0,0,49.94,2.29,47.37,-105.27c0,-1.2,-0.07,-2.36,-0.13,-3.51c23.63,14.92,49.18,39.28,49.57,75c0,0,48.82,-10.8,18.32,-114c-0.16,-0.55,-0.33,-1.09,-0.5,-1.63c26.21,8.62,55.9,25.66,65.14,59.27c0,0,44.46,-22.88,-11.32,-114.87c-0.67,-1.1,-1.33,-2.15,-2,-3.18c28,1.12,62.42,9.46,80.6,40.31c0,0,36.94,-33.7,-40.93,-107.94c-0.87,-0.82,-1.73,-1.62,-2.58,-2.39c27.26,-6.15,62.56,-7,88.07,18c0,0,26.89,-42.16,-67.63,-93.55l-1.5,-0.8c24.69,-12.4,57.74,-21.35,88.04,-4.12zm-442.7,-23.46a53.14,53.14,0,1,1,53.14,53.14a53.15,53.15,0,0,1,-53.14,-53.14z" >
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" values="360 390.35 390.35; 0 390.35 390.35" dur="5s" repeatCount="indefinite"></animateTransform>
    <animateMotion dur="5s" repeatCount="indefinite" rotate="auto" >
    <mpath xlink:href="#cutline" />
    </animateMotion> 
  </path>
  </g>
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

SVG

path

jqueryanimate

在 SVG 路径中对 SVG 进行动画处理 的相关文章

随机推荐

  • 每次我从该模块导入任何内容时都会运行 __init__.py 吗？ [复制]

    这个问题在这里已经有答案了 我有一个名为core 其中包含许多 python 文件 If I do from core curve import Curve Does init py接到电话吗 我可以将适用于所有核心文件的导入语句移至 in

  • d3 强制添加和删除节点

    我根据我在书中看到的一些代码整理了以下 jfiddle http jsfiddle net hiwilson1 o3gwejbx 2 http jsfiddle net hiwilson1 o3gwejbx 2 总的来说 我关注正在发生的事

  • Python 在 Mac OSX 上找不到 distutils_path

    我一直在使用 virtualenv pip 进行 python 开发 我不确定发生了什么 但每当我尝试运行命令行工具或导入库时 我都会突然收到以下错误消息 Traceback most recent call last File Users

  • WPF在触发器中设置边框背景

    我需要创建一个触发器 当 MouseEnter 发生时 它将更改 Border 背景属性 我做了以下事情

  • 如何使用 Powershell 3 增加并行进程数？

    我正在尝试并行运行 20 个进程 我如下更改了会话 但没有运气 我每个会话最多只能有 5 个并行进程 wo New PSWorkflowExecutionOption MaxSessionsPerWorkflow 50 MaxDisconn

  • cURL下载文件问题

    当我给出 URL 时 http 192 168 150 41 8080 filereport 31779 json 在浏览器中 它会自动下载文件为31779 report json 现在使用我正在尝试使用下载文件curl但我收到以下错误 c

  • 静态资源中的 Spring Boot 2.6 和 Angular

    我的问题非常类似于this https stackoverflow com questions 40769200 configure spring boot for spa frontend已经提出并回答过的问题 但不是 100 最新的 我

  • 声明两个同名变量

    是否可以调用在函数外部设置的同名变量 var a window width I want to call this variable if isFunction p var a window height Not this one aler

  • HTML.EditorFor 添加类不起作用

    我在将 css 类添加到 HTML EditorFor 时遇到问题 我在网上搜索是否有人遇到同样的问题 但我找不到任何东西 你能帮我么 所以 这不是关于未定义类的 css 问题 而是问题 但简单地说 它没有添加到输入字段中 这是视图中的代码

  • 同一网络中的 Fabric-Kafka 和 Fabric-odor 容器的用例是什么

    我可以看到有 3 种类型的排序者 当我部署结构网络时 最多使用两种类型 https hub docker com r hyperledger fabric orderer https hub docker com r hyperledger

  • 不明白objective-c中的多个参数声明

    有人可以帮我澄清一下吗 当有多个参数时 参数在方法名称中的冒号后面声明 参数在声明中将名称分开 就像在消息中一样 例如 void setWidth float width height float height 所以在上面 方法是实例变量

  • 是否可以使用容器管理的身份验证和密码加盐？

    我知道如何设置使用表单身份验证并使用摘要密码 例如 SHA 256 的普通容器管理安全性 像这样的东西 web xml

  • 如何在iPhone中的sqlite数据库中插入图像

    如何在数据库中插入图像 我尝试过但没有插入 查询的问题出在哪里 这是我的模型类 m 文件 此文件中的代码之后sqlite3 prepare v2我的痕迹没有插入sqlite3 bind blob之后就直接出去了sqlite3 prepare

  • 使用 Retrofit2 在 Android Studio 上的位置 0 处出现意外的 JSON 标记 # 错误

    我有一个问题 JSON 中位置 0 处出现意外的标记 我想做的是使用 Firebase 上的 Cloud Function 删除 Firebase 用户 没有返回 但错误显示 存在意外的 json 令牌 这是一些代码 CloudFuncti

  • Twitter API 速率限制

    我想从 Twitter 收集几周内的数据 为此 我使用 RStudio Server 和 crontab 自动运行多个脚本 如下所示 require ROAuth require twitteR require plyr load twit

  • 将通用扩展方法限制为基本类型和字符串

    我想要 XElement XAttribute 的扩展方法 它允许我应用 ValueOrDefault 逻辑 也许具有各种略有不同的实现 ValueOrNull ValueOrDefault NumericValueOrDefault 验证

  • HTML 实体解码为特殊字符

    我想在输出中显示特殊符号 例如 我的文本可能包含实体代码 例如 lt gt ETC 我想将其显示为 lt gt 在我的输出中 我需要在 SQL 中执行此操作 我用谷歌搜索了这个并得到了一个函数 select dbms xmlgen conv

  • 使用依赖注入在工作线程中实例化对象

    我的目标是在并行线程中运行一个永无止境的进程 问题是 我不能只在新线程中实例化我的工作服务 因为我在我的应用程序中使用 DI 根据我对 SO 的研究 我注意到很多人建议需要将抽象工厂注入到线程中 以在并行线程中动态实例化线程安全对象 1 h

  • 输出字符串字符总数

    我的问题是 如果我想获取用户输入的字符总数 应该使用什么方法 在不使用数组的情况下 我尝试使用 length 但它没有返回名字和姓氏中的所有字符 它只返回名字 这是我的代码的示例 请不要笑我在编程方面真的很新 System out prin

  • 在 SVG 路径中对 SVG 进行动画处理

    我已经构建了一个路径动画 但 svg 中的锯片有问题 我想要为 Sawblade 制作动画 360 度旋转

热门标签