html - CSS SVG 动画在边缘不起作用-6ren

html - CSS SVG 动画在边缘不起作用

转载作者：太空宇宙更新时间：2023-11-04 06:06:59

目前，我正在使用 CSS SVG 动画，它在 chrome 中运行良好，但在 edge 浏览器中无法运行。下面附上代码。这是 stackblitz 中的实例

动画细节

从右到左填充左箭头中的绿色。
从左到右在右箭头中填充蓝色。

SVG代码:

<svg width="576px" height="360px" viewBox="0 0 576 360" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <title>Artboard</title>
                        <desc>Created with Sketch.</desc>
                        <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Group" transform="translate(0.000000, 185.000000)" fill="#7DBE40">
                                <rect id="Rectangle" x="0" y="0" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-8" x="0" y="13" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy" x="12" y="0" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-9" x="12" y="13" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-2" x="25" y="0" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-10" x="25" y="13" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-3" x="37" y="0" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-11" x="37" y="13" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-4" x="50" y="0" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-12" x="50" y="13" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-5" x="62" y="0" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-13" x="62" y="13" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-6" x="75" y="0" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-14" x="75" y="13" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-7" x="87" y="0" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-15" x="87" y="13" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-23" x="0" y="26" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-22" x="12" y="26" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-21" x="25" y="26" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-20" x="37" y="26" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-19" x="50" y="26" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-18" x="62" y="26" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-17" x="75" y="26" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-16" x="87" y="26" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-31" x="0" y="39" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-30" x="12" y="39" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-29" x="25" y="39" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-28" x="37" y="39" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-27" x="50" y="39" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-26" x="62" y="39" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-25" x="75" y="39" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-24" x="87" y="39" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-39" x="0" y="52" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-38" x="12" y="52" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-37" x="25" y="52" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-36" x="37" y="52" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-35" x="50" y="52" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-34" x="62" y="52" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-33" x="75" y="52" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-32" x="87" y="52" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-47" x="0" y="65" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-46" x="12" y="65" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-45" x="25" y="65" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-44" x="37" y="65" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-43" x="50" y="65" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-42" x="62" y="65" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-41" x="75" y="65" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-40" x="87" y="65" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-55" x="0" y="78" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-54" x="12" y="78" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-53" x="25" y="78" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-52" x="37" y="78" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-51" x="50" y="78" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-50" x="62" y="78" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-49" x="75" y="78" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-48" x="87" y="78" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-63" x="0" y="91" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-62" x="12" y="91" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-61" x="25" y="91" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-60" x="37" y="91" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-59" x="50" y="91" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-58" x="62" y="91" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-57" x="75" y="91" width="10" height="10"></rect>
                                <rect id="Rectangle-Copy-56" x="87" y="91" width="10" height="10"></rect>
                            </g>
                            <g id="Group-2" transform="translate(479.000000, 185.000000)" fill="#007CB8">
                                <rect id="Rectangle" x="0" y="0" width="47" height="48"></rect>
                                <rect id="Rectangle-Copy-65" x="0" y="51" width="47" height="48"></rect>
                                <rect id="Rectangle-Copy-64" x="50" y="0" width="47" height="48"></rect>
                                <rect id="Rectangle-Copy-66" x="50" y="51" width="47" height="48"></rect>
                            </g>
                            <g id="Group-3" transform="translate(215.000000, 9.000000)">
                                <rect id="Rectangle" fill="#007BBC" x="0" y="0" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-67" fill="#007BBC" x="0" y="15" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-68" fill="#007BBC" x="0" y="30" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-69" fill="#007BBC" x="0" y="44" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-70" fill="#007BBC" x="0" y="59" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-71" fill="#7BC043" x="0" y="74" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-72" fill="#7BC043" x="0" y="89" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-73" fill="#7BC043" x="0" y="104" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-74" fill="#7BC043" x="0" y="118" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-75" fill="#007BBC" x="0" y="133" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-76" fill="#007BBC" x="0" y="148" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-77" fill="#007BBC" x="0" y="163" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-78" fill="#007BBC" x="0" y="178" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-79" fill="#007BBC" x="0" y="192" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-80" fill="#007BBC" x="0" y="207" width="148" height="10"></rect>
                                <rect id="Rectangle-Copy-81" fill="#007BBC" x="0" y="222" width="148" height="10"></rect>
                            </g>
                            <path d="M204,0 L375,0 L375,250 L204,250 L204,0 Z M209,5 L209,245 L370,245 L370,5 L209,5 Z" id="Rectangle" fill="#000000" fill-rule="nonzero"></path>
                            <rect id="Rectangle"  stroke="#9AC270" stroke-width="2" x="199" y="80" width="179" height="60"></rect>
                            <defs>
                                <clipPath id="left-top-line">
                                    <rect x="48" y="108" height="2" width="150" style="transform:translateX(-100)  rotate(180)">

                                    </rect>  
                                </clipPath> 
                                <clipPath id="left-vertical-line">
                                        <rect x="46" y="108" height="65" width="2"
                                        style="transform:translateX(-100)  rotate(180)">

                                        </rect>  
                                </clipPath>
                                <clipPath id="left-arrow">
                                    <rect x= "37" height="10" y="165" width="20" fill="green" style="transform:translateX(-100)  rotate(180)">
                                        <!-- left arrow -->

                                    </rect>
                                </clipPath>
                                <clipPath id="right-top-line">
                                    <rect x="375" y="65" height="2" width="150" fill="green" style="transform:translateX(-100)  rotate(180)" >
                                        <!-- right top line -->

                                    </rect>
                                </clipPath>
                                <clipPath id="right-vertical-line">
                                    <rect x="524" y="65" height="82" width="2" style="transform:translateX(-100)  rotate(180)" >
                                        <!-- right vertical line -->

                                    </rect>
                                </clipPath>
                                <clipPath id="right-bottom-line">
                                    <rect x="375" y="162" height="2" width="139" fill="green" style="transform:translateX(-100)  rotate(180)" >
                                        <!-- right bottom line -->

                                    </rect>
                                </clipPath>
                                <clipPath id="right-bottom-arrow">
                                    <rect x= "505" height="21" y="152" width="20" fill="green" style="transform:translateX(-100)  rotate(180)" >
                                        <!-- right bottom arrow -->

                                    </rect>
                                </clipPath>
                                <clipPath id="right-top-arrow">
                                    <rect x= "514" height="20" y="140" width="20" fill="green" style="transform:translateX(-100)  rotate(180)" >
                                        <!-- right top arrow -->

                                    </rect>                
                                </clipPath>
                            </defs>  
                            <polygon id="Path" fill="#979797" fill-rule="nonzero" points="48 109.990893 198 109.990893 198 108 46 108 46 172 48 172"></polygon>
                            <polygon class="fill fill1 polygon-left-top-line" clip-path="url(#left-top-line)" fill="#7BC043" fill-rule="nonzero" points="48 109.990893 198 109.990893 198 108 46 108 46 172 48 172"></polygon>
                            <polygon class="fill fill2" clip-path="url(#left-vertical-line)" fill="#7BC043" fill-rule="nonzero" points="48 109.990893 198 109.990893 198 108 46 108 46 172 48 172"></polygon>

                            <polygon id="Path-2" fill="#979797" fill-rule="nonzero" points="38.9828151 167.008053 38 168.673053 47.3205292 174 57 168.681106 56.0459208 167 47.3395584 171.784169"></polygon>
                            <polygon class="fill fill3" clip-path="url(#left-arrow)" fill="#7BC043" fill-rule="nonzero" points="38.9828151 167.008053 38 168.673053 47.3205292 174 57 168.681106 56.0459208 167 47.3395584 171.784169"></polygon>

                            <polygon id="Path-3" fill="#979797" fill-rule="nonzero" points="523.998129 66.9904511 523.998129 145 526 145 526 65 375 65 375 66.9904511"></polygon>
                            <polygon class="fill fill1" clip-path="url(#right-top-line)" fill="#007CB8" fill-rule="nonzero" points="523.998129 66.9904511 523.998129 145 526 145 526 65 375 65 375 66.9904511"></polygon>
                            <polygon class="fill fill2" clip-path="url(#right-vertical-line)" fill="#007CB8" fill-rule="nonzero" points="523.998129 66.9904511 523.998129 145 526 145 526 65 375 65 375 66.9904511"></polygon>

                            <path  id="Path-4" fill="#979797" fill-rule="nonzero" d="M523.998109,145.862687 L525.037303,145.861627 L524.5174,145.523008 L523.998109,145.862687 Z M516.037569,140 L515,141.799755 L524.519637,148 L534,141.798694 L532.959182,140.00106 L524.5174,145.523008 L516.037569,140 Z"></path>
                            <path  class="fill fill3" clip-path="url(#right-top-arrow)" fill="#007CB8" fill-rule="nonzero" d="M523.998109,145.862687 L525.037303,145.861627 L524.5174,145.523008 L523.998109,145.862687 Z M516.037569,140 L515,141.799755 L524.519637,148 L534,141.798694 L532.959182,140.00106 L524.5174,145.523008 L516.037569,140 Z"></path>

                            <polygon id="Path-5" fill="#979797" fill-rule="nonzero" points="375 164 513 164 513 162 375 162"></polygon>
                            <polygon class="fill fill1" clip-path="url(#right-bottom-line)" fill="#007CB8" fill-rule="nonzero" points="375 164 513 164 513 162 375 162"></polygon>

                            <polygon id="Path-6" fill="#979797" fill-rule="nonzero" points="506 171.825952 507.606517 173 515 162.992649 507.606087 153 506.000431 154.175213 512.525427 162.993547"></polygon>
                            <polygon class="fill fill2" clip-path="url(#right-bottom-arrow)" fill="#007CB8" fill-rule="nonzero" points="506 171.825952 507.606517 173 515 162.992649 507.606087 153 506.000431 154.175213 512.525427 162.993547"></polygon>

                            <polygon id="Path-7" fill="#000000" fill-rule="nonzero" points="86.2283993 330.017645 51.9141509 311 49 316.229072 84.6734246 336 500.143621 336 531 316.127251 527.745447 311.101821 498.374882 330.017645"></polygon>

                            <polygon id="Path-8" fill="#000000" fill-rule="nonzero" points="287 343 287 360 292 360 292 343"></polygon>
                            <polygon id="Path-8" fill="#000000" fill-rule="nonzero" transform="translate(289.500000, 351.500000) rotate(90.000000) translate(-289.500000, -351.500000) " points="287 343 287 360 292 360 292 343"></polygon>
                        </g>
                    </svg>

CSS 代码:

#left-top-line rect {
  animation: pavan 3s ease;
}
#left-vertical-line rect, #right-top-line rect, #right-vertical-line rect, #right-bottom-line rect, #right-bottom-arrow rect, #right-top-arrow rect {
  animation: pavan1 3s ease;
}
@keyframes pavan {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes pavan1 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

最佳答案

这是您的代码的简化版本。我只做了一个箭头。

我正在使用您的路径作为箭头的剪切路径。

 <defs> 
    <clipPath id="clip">
      <polygon id="poly" points="48,109.990893 198, 109.990893 198,108 46,108 46,172 48,172"></polygon>                         
      <polygon id="arrow" points="38.9828151 167.008053 38 168.673053 47.3205292 174 57 168.681106 56.0459208 167 47.3395584 171.784169"></polygon>   
    </clipPath>
  </defs>

我再次使用这些路径作为灰色基础

<use xlink:href="#poly" fill="#ccc" />
<use xlink:href="#arrow" fill="#ccc" />

有一条非常宽的绿色折线，我正在使用 stroke-dasharray 和 stroke-dashoffset 制作动画。宽绿色多段线被路径剪裁。

svg{border:1px solid; width:100vh;}
polyline{fill:none}

#poly1{stroke-dasharray:219px; stroke-dashoffset:219px;animation: dash 2s 1 forwards;}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewBox="0 90 220 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <defs> 
    <clipPath id="clip">
      <polygon id="poly" points="48,109.990893 198, 109.990893 198,108 46,108 46,172 48,172"></polygon>                         
      <polygon id="arrow" points="38.9828151 167.008053 38 168.673053 47.3205292 174 57 168.681106 56.0459208 167 47.3395584 171.784169"></polygon>   
    </clipPath>
  </defs>
  
  
<use xlink:href="#poly" fill="#ccc" />
<use xlink:href="#arrow" fill="#ccc" />                          

<polyline id="poly1" points="198,108 46,108 46,175" stroke="#7BC043" stroke-width="20" clip-path="url(#clip)"></polyline>


</svg>

关于html - CSS SVG 动画在边缘不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56766909/

文章推荐： c - 如何为 LUA 创建安全的 C 接口(interface)

文章推荐： c - 有效地初始化 C 中的数组/数据 block

svg - 用于将页内 SVG 代码下载为 SVG 文件的按钮？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
svg - 如何将一个 SVG 元素的内容复制到另一个 SVG 元素并保持同步
有两个 SVG 元素( SVG1 和 SVG2 )，其中 SVG1 是一个包含各种元素的大区域，会不时添加、删除和重新定位。另一方面，SVG2 需要用作图标化表示(小) SVG1 的版本，非常小，但
svg - 如何在 svg 文档中以编程方式创建 svg 元素？
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。但是，这种方法似乎不适用
svg - 我正在尝试使用 flutter svg，但加载黑色 svg
我正在尝试使用 Flutter SVG 依赖项，我将 svg 放入 Assets 中，在 pubspec.yaml 中设置，并在我的小部件中设置，但是，使用黑色容器加载 svg 我已经尝试过更改 sv
svg - 为什么将
为什么这样的演示:http://jsbin.com/ejorus/2/edit，将元素嵌套在另一个元素内？ JS
svg - 如何将 svg 代码保存为 .svg 图像？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
svg - 在另一个 SVG 元素中响应地居中 SVG 元素？
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
svg - 我如何将一个 SVG 置于另一个 SVG 中
我试图将 play svg 居中放置在 SVG 圆圈的中间，但似乎不知道该怎么做。垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
svg - 用另一个 SVG 形状填充 SVG 形状
是否可以使用一个 SVG 形状作为另一个形状的填充？最佳答案您想使用 SVG Pattern .见 this example : 注意
svg - SVG 中跨路径的渐变
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
svg - 如何将形状优美的多边形转换为 SVG？
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
svg - Webpack:无法使用文件加载器显示 SVG 图像(svg 解析错误)
我使用 require 的 SVG 没有显示。在我的终端中，svg Assets 被发出并且路径在我的 html 中正确设置。但是，SVG 不会显示，而其他格式(如 jpg 或 png)可以显示
svg - SVG 中的混合模式
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径，我想用公式组合它们:(1*2) + (3*4)，即路径 1 和路径 2 应该使用乘法模式混合，类似地路径 3 和路径 4 应该使用混合相
svg - SVG 支持多少级递归？
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试，我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成，
svg - svg 中的剪辑路径和变换组合
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。问题是什么？为什么
svg - svg 形状中的文本区域
使用联合 js 在 svg 中创建了一个文本区域。但是，我无法在文本区域中输入任何文本。如何使文本区域可编辑？代码: var graph = new joint.dia.Graph;
svg - svg 动画可以在不丢失累积信息的情况下暂停吗？
您可以不受限制地停止和重复动画，但如果您重新启动一个不确定的动画，它将失去其累积值并从初始值开始。也许我应该用一个例子来澄清；拿这个动画: 如果我停止此动画，并开始影响同一对象旋转的不同动画(
svg - SVG、多条小路径和一条大路径哪个更有效？
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中)，在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异？我正在考虑将某种动画从一张图片变成一张完全不同
svg - SVG 中的海龟图形？
logo的turtlegraphics的svg路径中是否有等价物？而不是硬编码的 x 和 y 坐标，这也迫使我在移动更相对的“增量”方法时调整控制点。我的解决方案应该适用于 FOCS(Firefo
svg - SVG 图案中使用的圆帽线
目前正在使用 SVG 元素与一堆元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题，但没有任何效果。这是一个带有针迹的圆圈的代码:

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - CSS SVG 动画在边缘不起作用