标签: svg-animate

我正在 SVG 中为多边形形状设置动画（因此它可以用作 CSS 中的背景）。我很好奇是否有一种方法可以随机生成一个值来使用，或者其他一些方法，这样动画在每次加载时并不总是从相同的位置开始（不使用外部 SVG 库和不使用 JavaScript）？

这是当前的SVG：

<polygon style="stroke:rgb(255,0,0);fill:transparent;" points="0,0 121.5,150 600,0 ">
    <animate attributeName="points" dur="24s" values="0,20 121.5,150 600,0; 0,100 571.5,150 306.5,0; 0,20 121.5,150 600,0" repeatCount="indefinite" keyTimes="0; 0.5; 1" calcMode="spline" keySplines=".5 0 .5 1; .5 0 .5 1" />
</polygon>

我正在尝试为一个简单的SVG SMIL动画添加一个计时功能.显然可以使用keySplines属性设置计时/缓动,但在我的示例中它不起作用:

<svg xmlns="http://www.w3.org/2000/svg" width="214" height="214" viewBox="0 0 24 24">

    <rect style="fill:#000;" width="4" height="4" x="3" y="11">
        <animateTransform attributeName="transform" 
        begin="0s" dur="2s" type="translate" from="0 0" to="40 0" repeatCount="4" fill="freeze"
        calcMode="spline"
        keySplines="0.4, 0, 0.2, 1"/>
    </rect>

    <rect style="fill:#ff0000;" width="4" height="4" x="3" y="16">
        <animateTransform attributeName="transform" 
        begin="0s" dur="2s" type="translate" from="0 0" to="40 0" repeatCount="4" fill="freeze" />
    </rect>

</svg>

这是一个演示:http://jsfiddle.net/q4e4049s/,黑色应该有缓和

我有一个灰色虚线的SVG.我想要做的是在绿色SVG虚线上叠加,并将灰色动画显示绿色.Sorta就像一个从右到左移动的仪表.

我看到了如何制作虚线的这个例子:

http://jsfiddle.net/ehan4/2/

并且能够做到但我的线已经破灭了.

我最终这样做了:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 666.9 123.8" enable-background="new 0 0 666.9 123.8" xml:space="preserve">
    <path  opacity="0.4" stroke-width="3" fill="none" stroke="#66CD00" stroke-linecap="round" stroke-miterlimit="5" stroke-dasharray="1,6" d="
        M656.2,118.5c0,0-320.4-251-645.9-0.7" />
        <path id="top"  opacity="0.4" fill="none" stroke="#AEAEAE" stroke-linecap="round" stroke-miterlimit="5" stroke-dasharray="1,6" d="
    M656.2,118.5c0,0-320.4-251-645.9-0.7"/>

</svg>

var path = document.querySelector('#top');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
  'none';
// Set up the starting positions
path.style.strokeDasharray = 1  + ' ' + 6;
path.style.strokeDashoffset = length;

// …

我想为SVG动画循环的每次迭代添加一个延迟.这是一个简单的例子.

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
  <circle cx="50" cy="50" r="15" fill="blue">
    <animate id="op" attributeType="CSS" attributeName="opacity"
             from="1" to="0" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

begin仅使用延迟第一次迭代,那么是否有延迟每次迭代的方法？

<svg viewbox="-20 -20 100 100">

  <circle r="15.29563" cx="0" stroke="#7dc4c2" fill="#5ea4a2">

</svg>

如何根据百分比填写如下圈子!!

http://i.stack.imgur.com/gVAN5.png

提前致谢.

我有一个SVG文件,其代码如下,动画.我想在Android原生应用程序中使用它.我该如何使用该svg文件？我知道使用svg滑行,我从下面的样本测试过.正常的svg正在工作但不是这个. https://github.com/bumptech/glide/tree/master/samples/svg

<?xml version="1.0" encoding="utf-8"?>
   <svg width='124px' height='124px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt">
     <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
     <circle cx="50" cy="50" r="40" stroke="rgba(255,255,255,0.259)" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#ffffff" fill="none" stroke-width="6" stroke-linecap="round">
          <animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite" from="0" to="502"></animate>
          <animate attributeName="stroke-dasharray" dur="3s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate>
     </circle>
</svg>

请建议我任何库或代码示例谢谢.

我有动画 gif。但是我需要导出为 SVG 格式。是否可以将动画 GIF 转换为动画 SVG 图像？我想将 gif 导出为动画 SVG，以便可以在我的网站和移动应用程序上使用它。

我想要的是下图-

我对此有 3 个相关问题

1.我们可以用single path.绘制整个画布吗？

2.如果我们只能用一个以上的路径绘制整体，给它们动画会方便吗？

3.在这两种情况下，任何人都可以用样本指导正确的方法吗？

这就是我到目前为止所得到的......正如你所看到的，我不是专家SVG，当然，你可以用一个圆圈来表示大点。先感谢您。

svg {
  width: 100%;
}

.straightLine {
  height: 3000px;
  position: relative;
}

.st0 {
  fill: none;
  stroke-dashoffset: 3px;
  stroke: #000000;
  stroke-width: 5;
  stroke-miterlimit: 10;
}

<div class="straightLine">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 1000" style="enable-background:new 0 0 1280 800;" xml:space="preserve">
	<g class="all">
	<path id="line1" class="st0" stroke-dasharray="10,9" d="M 35 -17 C 0 190 50 83 600 109 "/>
	<path id="line1" class="st0" stroke-dasharray="10,9" …

TL; 博士

symbol-svg-sprite使用创建并插入其片段后svg+use，我想css-variables在 #ShadowDOM 中使用 SVGpresentation attributes来更改例如stroke-width="0"在 中stroke-width="5"，并且transition property必须工作，问题是这些stroke-width值在任何事件（：悬停：活动：焦点）下都有效，transition但没有。

外部 SVG 示例

<svg style='display:none;' xmlns="http://www.w3.org/2000/svg">
    <symbol id='symbol-id' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 20">
        <path style='transition-duration: var(--custom-duration); transition-property: var(--custom-property);' stroke="var(--custom-stroke)" stroke-width="var(--custom-stroke-width)" fill="cyan" d="long..."
    </symbol>
</svg>

插入 SVG+USE

<svg>
    <use class="use-class" xlink:href="../transition-error.svg#symbol-id"></use>
</svg>

应用 CSS 样式

svg
    outline 1px solid black
    width 250px
    height 250px

.use-class
    --custom-stroke-width 0
    --custom-duration .5s
    --custom-property all

.use-class:hover
    --custom-stroke-width 2
    --custom-stroke …

macOS Mojave After Effects 17.0.2 (CC 2020) Chrome/FF/Safari 和 Lottie/Bodymovin 最新版本

在 Safari 中缩放 svg 动画时（变换：scale(>1)），它将呈现极度像素化/模糊。在 Chrome 和 Firefox 中，它渲染没有问题。这是一个已知问题吗？如果是，是否有已知的解决方法？

您可以在这里找到动画： http: //kb.zeitweisen.com/Index.html