那些遇到过的问题

标签: svg-animate

在路径末尾重置简单的 svg 对象

这可能真的很简单，但我开始学习 svg 并且对以下代码的行为感到困惑：

<svg>
<defs>
    <path id="thepath" fill="none" stroke="#000000" d="M25,0 L200,200" />
</defs>
<rect x="25" y="0" width="50" height="100" fill="slategrey">
      <animateTransform id="one"
                        attributeType="xml"
                        attributeName="transform"
                        type="rotate"
                        from="0 50 50"
                        to="360 50 50"
                        dur="1s"
                        repeatCount="indefinite" 
                        end ="onemove.end"/>

    <animateMotion id="onemove" dur="3s">
        <mpath xlink:href="#thepath"/>
    </animateMotion>
</rect>
Run Code Online (Sandbox Code Playgroud)

我期望发生的是矩形在中心点上旋转成圆形。它的作用。

我希望它也能沿着这条路走下去。它的作用。

我希望它在路径上停止旋转。我认为确实如此。

我希望它停留在路径的尽头。它没有。

它重置到起点并停止旋转。所以我不确定是重置停止了旋转还是实际的结束语句停止了旋转。

所以我的问题有两个：为什么它会重置以及我如何防止它。

此外，任何指向良好 svg 教程的链接将不胜感激。虽然我找到了很多教程，但我认为我没有找到质量，因为我觉得这是一个非常简单的问题，我应该已经从我的研究中知道了。

我想我需要一些东西来防止重置，但我不知道是什么。

提前致谢。

svg svg-animate

Chr*_*ris
lucky-day
3
推荐指数
1
解决办法
2108
查看次数

svg animateTransform同时触发多个动画

在以下示例中,我需要同时执行所有动画.但作品只有一个.

<g>
    <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" values="2 100 100; -1 100 100; 1 100 100; -0.5 100 100 0.5 100 100" begin="indefinite" dur="0.35s" fill="freeze" />

    <animateTransform attributeName="transform" attributeType="XML"
                      type="scale" values="1; 1.2; 1" begin="indefinite" dur="0.35s" fill="freeze" />

    <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" values="0 0; -100 -100; 0; 0" begin="indefinite" dur="0.35s" fill="freeze" />

    <image x="0" y="0" width="200" height="200"  xlink:href="<?php  echo $cck->getValue('project_icon'); ?>" />
</g>
Run Code Online (Sandbox Code Playgroud)

行动已由js触发:

var animations = $( $this ).find( 'animateTransform' );
animations[0].beginElement();
animations[1].beginElement();
animations[2].beginElement();
Run Code Online (Sandbox Code Playgroud)

svg svg-animate

Ser*_*nko
lucky-day
3
推荐指数
1
解决办法
6626
查看次数

在悬停时开始和暂停SVG动画

当用户将鼠标悬停在SVG上时,我想在下面的SVG上设置齿轮动画.也就是说,当鼠标进入时,两个齿轮在它们停止的地方开始旋转.当鼠标离开时,齿轮会停在它们所处的任何位置.如果可能的话,我希望动画以易于进/出功能开始和结束.如何使用SVG动画完成此操作？

Codepen

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256" viewBox="0 0 256 256">

    <path d="M249.363 80.921l-6.402-15.451c-1.769-4.267-6.659-6.292-10.927-4.528l-9.032 3.7 c-8.043-12.801-18.893-23.646-31.692-31.689l3.744-9.032c1.768-4.266-0.258-9.162-4.528-10.926l-15.45-6.402 c-4.264-1.764-9.16 0.261-10.923 4.523l-3.744 9.032c-14.458-3.293-29.542-3.478-44.817 0l-3.74-9.028 c-1.768-4.267-6.659-6.292-10.926-4.528l-15.451 6.402c-4.267 1.768-6.296 6.656-4.528 10.926l3.744 9 C71.893 41 61 51.9 53 64.687l-9.032-3.744c-4.263-1.764-9.158 0.261-10.927 4.528l-6.398 15.5 c-1.768 4.3 0.3 9.2 4.5 10.926l9.028 3.74c-3.349 14.666-3.435 29.8 0 44.816l-9.028 3.7 c-4.271 1.768-6.296 6.664-4.528 10.926l6.398 15.451c1.772 4.3 6.7 6.3 10.9 4.524l9.032-3.741 c8.044 12.8 18.9 23.6 31.7 31.693l-3.74 9.032c-1.768 4.3 0.3 9.2 4.5 10.927l15.451 6.4 c4.267 1.8 9.158-0.257 10.926-4.528l3.74-9.028c14.613 3.3 29.7 3.4 44.8 0l3.739 …
Run Code Online (Sandbox Code Playgroud)

svg svg-animate

Dav*_*ave
lucky-day
3
推荐指数
2
解决办法
1万
查看次数

SVG .end事件不起作用？

我正在尝试学习和玩一些基本的SVG动画。我正在阅读有关CSS-Tricks的教程/指南，并注意到该.end事件在Chrome和Safari中不起作用。是什么赋予了？这不被支持还是一个错误？对于简单的事情似乎很愚蠢。还是Codepen的错误？

例如Codepen - http://codepen.io/jaminroe/pen/xGQvEE/?editors=110

谢谢

svg svg-animate

jam*_*roe
2015 07-31
3
推荐指数
1
解决办法
458
查看次数

SVG 图案动画

我在 svg 中定义了一个模式。我想连续旋转它......我无法在该模式定义上应用动画。我对一个符号应用了相同的动画，它可以工作，但不能在模式上工作......

<pattern id="GPattern"
         x="10" y="10" width="20" height="20"
         patternUnits="userSpaceOnUse"
         patternTransform="rotate(35)"
        >
        <circle id="mycircle" cx="10" cy="10" r="10" style="stroke: none; fill: red" > </circle>
     </pattern>
Run Code Online (Sandbox Code Playgroud)

这是模式定义。

请帮助我如何将某些变换动画应用于整个“模式”以及它的各个内容......在这种情况下圈......

svg svg-animate svg-filters snap.svg

The*_*ash
2015 09-30
3
推荐指数
1
解决办法
2639
查看次数

SVG-沿路径动画/移动点

我正在寻找一种沿现有路径移动点的方法，以便获得如下所示的动画：
在此处输入图片说明

我当时正在考虑使用dasharray，但无法获得确切的行为。

这是我尝试过的示例，但如您所见，它实际上并不起作用：

path.link {
  stroke-width: 3px;
  stroke-dasharray: 5 5;
  stroke: black;
}
path.link-anim {
  stroke-width: 3px;
  animation: link-anim 5s linear infinite;
}
path.red {
  stroke: red;
}
path.blue {
  stroke: blue;
}
path.green {
  stroke: green;
}
path.pink {
  stroke: pink;
}
@keyframes link-anim {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 5 5 100%;
    }
    100% {
        stroke-dashoffset: 100%;
        stroke-dasharray: 100% 5 5;
    }
}
Run Code Online (Sandbox Code Playgroud) 
<svg width="450" height="450">
  <g>
    <path class="link" d="M10,10L100,10"></path>
    <path class="link-anim red" d="M10,10L100,10"></path>
  </g>
  <g>
    <path class="link" …
Run Code Online (Sandbox Code Playgroud)

css svg css3 css-animations svg-animate

Dek*_*kel
2017 06-04
3
推荐指数
2
解决办法
2659
查看次数

SVG：动态添加动画元素

我尝试animate动态地向我的path元素添加一个元素，它工作正常。我的html： 

<g id="3" class="cluster loop-node">
<path fill="#edf1f2" stroke="#028d35" d="M92,-16C92,-16 408,-16 408,-16 414,-16 420,-22 420,-28 420,-28 420,-88 420,-88 420,-94 414,-100 408,-100 408,-100 92,-100 92,-100 86,-100 80,-94 80,-88 80,-88 80,-28 80,-28 80,-22 86,-16 92,-16"></path>
<text text-anchor="start" x="213.5547" y="-79.4" font-family="Times,serif" font-size="14.00" fill="#000000">1:11</text>
<text text-anchor="start" x="243.8131" y="-79.4" font-family="Times,serif" font-size="14.00" fill="#000000"> (Loop)</text>
</g>
Run Code Online (Sandbox Code Playgroud)

我通过javascript添加我的animate元素（'<animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="3"></animate>'）：

$("#3").find("path").append('<animate attributeType="XML" attributeName="stroke-width" values="6;1;6;1" dur="2s" repeatCount="indefinite"></animate>')
Run Code Online (Sandbox Code Playgroud)

之后animate标签被正确添加：

<g id="3" class="cluster loop-node">
<path fill="#edf1f2" stroke="#028d35" d="M92,-16C92,-16 408,-16 …
Run Code Online (Sandbox Code Playgroud)

javascript css svg svg-animate

Cod*_*ope
lucky-day
3
推荐指数
1
解决办法
2122
查看次数

在滤镜内制作 feDropShadow 动画

我有以下代码，我想feDropShadow在里面制作动画defs 

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap");

*,
*::before,
*::after {
	box-sizing: border-box;
	position: relative;
}

html,
body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Open Sans", sans-serif;
}

:root {
	--easing: cubic-bezier(0.87, 0.08, 0.23, 0.91);
	--duration: 0.3s;
	--pink: #770946;
}

#app {
	height: 100vh;
	width: 100%;
	background: #1e0238;
	position: relative;
	overflow: hidden;
}

.circle-pink {
	transform: scale(1);
	fill: none;
	stroke: var(--pink);
	stroke-width: 6;
}

.circle-fill {
	transform: scale(1); …
Run Code Online (Sandbox Code Playgroud)

html svg svg-animate svg-filters

Ama*_*tha
2020 03-24
3
推荐指数
1
解决办法
483
查看次数

SVG SMIL 路径动画在 Safari 中不起作用

我使用 SVG SMIL 动画是因为我还没有找到另一种方法来制作弯曲形状的动画。这种方法适用于除 iOS 浏览器之外的所有浏览器。

\n\n

这是我的 SVG 代码：

\n\n
<svg version="1.1" id="\xd0\xa1\xd0\xbb\xd0\xbe\xd0\xb9_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n     viewBox="0 0 540 450" style="enable-background:new 0 0 540 450;" xml:space="preserve">\n<style type="text/css">\n    .st0{fill:rgba(115, 203, 232, 0.3);}\n</style>\n<path id="t" class="st0" d="M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;">\n    <animate\n        attributeName="d"\n        attributeType="XML"\n        dur="10s"\n        repeatCount="indefinite"\n        values="\n            M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;\n            M393.620000,413.170000C314.860000,451.100000,219.884470,381.470294,91.370310,296.084829C-59.166688,186.229543,29.222773,79.276069,119.102773,81.566069C208.982773,83.866069,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,431.408010,79.499494,495.938010,159.869494C560.458010,240.249494,566.460000,329.930000,393.620000,413.170000Z;\n            M374.262300,334.744023C295.502300,372.674023,219.884470,464.784206,91.370310,379.398742C-59.166688,269.543456,86.027714,124.720021,175.907714,127.010021C265.787714,129.310021,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,434.437607,63.594111,498.967607,143.964111C563.487607,224.344111,547.102300,251.504023,374.262300,334.744023Z;\n            M270,376.835237C191.240000,414.765237,181.548418,328.452349,53.034258,243.066884C-97.502740,133.211598,86.319021,36.861713,176.199021,39.151713C266.079021,41.451713,336.324192,10.071305,405.399674,50.570962C472.843833,113.093459,600.249772,160.249902,501.647635,230.831974C407.113801,294.083100,442.840000,293.595237,270,376.835237Z;\n            M328.727569,304.241436C302.169852,351.959364,192.967667,434.488238,64.453507,349.102773C-86.083491,239.247487,100.185252,122.506085,163.148450,79.934747C247.318825,36.557748,311.038710,-14.398515,380.114192,26.101142C447.558351,88.623639,604.328075,280.967683,505.725938,351.549755C411.192104,414.800881,411.029233,229.973703,328.727569,304.241436Z;\n            M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;\n    "/>\n\n</path>\n<path id="t" class="st0" d="M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z">\n    <animate\n        attributeName="d"\n        dur="10s"\n        repeatCount="indefinite"\n        values="\n            M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z;\n            M314.232437,343.451865C235.022437,340.801865,68.622550,431.473244,28.022550,304.423244C-12.567450,177.363244,80.443183,65.747277,145.108413,88.464874C255.317034,138.502506,258.603391,56.904805,315.533391,33.824805C372.463391,10.744805,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,488.062437,349.281865,314.232437,343.451865Z;\n            M284.310494,403.295750C205.100494,400.645750,119.359757,400.250347,78.759757,273.200347C38.169757,146.140347,137.685161,85.261587,188.039896,57.241977C302.151379,35.727137,344.466357,155.777310,381.882047,136.600173C446.617771,113.520173,551.309427,137.307909,523.686036,212.055507C467.431656,320.627909,458.140494,409.125750,284.310494,403.295750Z;\n            M283.009540,355.160451C119.237528,330.394232,92.039722,396.347485,51.439722,269.297485C10.849722,142.237485,60.928873,8.505299,120.390286,55.941023C256.617988,143.706323,233.885264,158.379218,288.213356,167.823070C367.259574,178.567875,462.844553,181.540346,435.221162,256.287944C378.966782,364.860346,456.839540,360.990451,283.009540,355.160451Z;\n            M307.727667,404.596704C149.159471,399.344795,63.418734,479.608543,22.818734,352.558543C-17.771266,225.498543,127.277529,224.463669,173.729402,166.522116C278.734207,50.037633,336.660633,79.021023,361.066782,102.775369C416.695828,196.781232,491.465542,207.559427,485.958369,299.219428C479.140242,367.462255,481.557667,410.426704,307.727667,404.596704Z;\n            M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z;\n    "/>\n\n</path>\n\n</svg>\n\n
Run Code Online (Sandbox Code Playgroud)\n\n

我注意到，在 Safari 和其他 iOS 浏览器中，如果attributeName属性具有不同的值，动画就会起作用，fill例如。但我需要合作，arrtributeName = \'d\'因为这是关于改变形式的。

\n\n

请告诉我如何解决这个问题。 …

svg smil svg-animate

Han*_*nna
2020 06-16
3
推荐指数
1
解决办法
1553
查看次数

如何修复 SVG 动画在 Safari 中不起作用的问题

就在昨天，我成功制作了一个在 Chrome 中完美运行的动画 SVG。我今天尝试在 Safari 中打开它，但动画不起作用。有针对这个的解决方法吗？我尝试过做一些研究，但大多数都显示 CSS3，而d:pathCSS 方法也不起作用，而且实际上更糟，因为什么也没有显示。

这是我的代码

<svg width="1279" height="650" viewBox="0 0 1279 650" xmlns="http://www.w3.org/2000/svg">
    <path d="M-138 -167.889C-138 -167.889 2002 -494.389 1020.73 -167.889C39.4558 158.611 1111.22 305.526 942.746 516.955C681.205 845.177 -138 458.649 -138 458.649V -167.889Z" 
    fill="#000000">
    
    <!-- First shape and last shape in values are the same -->
    <animate 
            repeatCount="indefinite" 
            fill="#454599" 
            attributeName="d" 
            dur="12s" 
            values="
                M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;

                M-138 -167.889C-138 -167.889 1923.96 -760.278 1020.73 …
Run Code Online (Sandbox Code Playgroud)

svg svg-animate

nTu*_*ply
lucky-day
3
推荐指数
1
解决办法
1085
查看次数

标签 统计

svg ×10

svg-animate ×10

css ×2

svg-filters ×2

css-animations ×1

css3 ×1

html ×1

javascript ×1

smil ×1

snap.svg ×1