标签: svg-animate

我不知道我错过了什么.SVG动画在chrome中显示确定,但是虽然我在ie9和firefox中看到了图像,但我看不到动画.

我从Corel Draw x5导出了svg文件:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 25.4 2.64582"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:#898989;stroke-width:0.05}
    .fil0 {fill:none}
   ]]>
  </style>
 </defs>
 <g id="Capa_x0020_1">
    <path class="fil0 str0" d="M0.10261 2.04656c0.08134,0 0.25217...
    />

然后我添加了动画:

<path class="fil0 str0" d="M0.10261 2.04656c0.08134,0 0.25217...
    stroke-dasharray="">
  <animate id="first" attributeName="stroke-dashoffset" from="" to="0" dur="10s" begin="0s"
  onload="var length = parentNode.getTotalLength();
                   parentNode.setAttribute('stroke-dasharray',length+','+length);
                   this.setAttribute('from',length)" />
  </path>

代码可以在jsfiddle http://jsfiddle.net/calamar888/WsxHs/中看到

非常感谢! …

可以用CSS改变SVG矩形的宽度吗？

这不起作用:

#red {
    width: 800px;
}
#red:hover {
    width: 1600px;
}

见jsfiddle.

我正在尝试创建内部弯曲的透明形状，就像这样

但是我在创建这种弯曲形状时遇到了麻烦，这就是我所做的`

body {
  background-color: #00a4ffb3;
}

.parent_wrapper {
  height: 250px;
  width: 250px;
  position: relative;
  background-color: white;
}

.tab-indicator {
  position: absolute;
  background-color: #000000;
  width: 50px;
  height: 60px;
  border-radius: 50px 0 0 50px;
  z-index: 1;
  transform: translateY(0px);
  right: 0px;
  transition: transform .3s ease-out;
}

.tab-indicator .tab-indicator-left,
.tab-indicator .tab-indicator-right {
  background-color: #000000;
  height: 25px;
  width: 25px;
  position: absolute;
}

.tab-indicator .tab-indicator-left {
  right: 0;
  bottom: -24px;
}

.tab-indicator.data-white .tab-indicator-left:after,
.tab-indicator.data-white .tab-indicator-right:after {
  background-color: #F3F3F3;
}

.tab-indicator .tab-indicator-left:after {
  width: 100%;
  height: …

我正在尝试使用 Anime.js 将圆形的 SVG（在 Illustrator 中使用 Object > Compound Path > Make 转换为路径）转换为正方形（以相同方式转换），但是当时间线运行时，圆形被扭曲好像路径没有被正确解释。

不过方形看起来不错。

作为测试，您可以shape从标记中的 SVG 中删除目标类，以防止 Anime.js 运行，并且圆圈将正确显示。

为什么Anime.js无法读取我的圈子？

const circlePath = 'M153.1,49.5c63.2,0,114.5,51.3,114.5,114.5s-51.3,114.5-114.5,114.5S38.6,227.2,38.6,164S89.9,49.5,153.1,49.5z';
const squarePath = 'M270.7,275.7H23.9V31h246.8V275.7z';

var timeline = anime.timeline({
  autoplay: true,
  direction: "alternate",
  loop: true
});

timeline.add({
  targets: ".shape",
  d: {
    value: [
      circlePath,
      squarePath
    ],
    duration: 1500,
    easing: "easeInOutQuad"
  },
  offset: 1500
});

svg {
  margin: 1rem;
  border: 2px solid #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<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" width="300px" height="300px" viewBox="0 …

我有一个动画圈,看起来像这样:

蓝色部分倒计时,例如在10秒内从满到无.橙色圆圈只是一个圆圈.但我想要点击它时圆圈会变小.所以我为圆圈做了一个onclick事件.

circleDraw.node.onclick = function () {
            circleDraw.animate({
            stroke: "#E0B6B2",
            arc: [100, 100, 100, 100, 100]
             }, 500);
            circleDraw.toFront();

};

这是有效的,我已经为两个圆圈制作了它们,它们都变得更小但是,在500毫秒后,蓝色圆圈再次变大,因为蓝色圆圈的计时器得到的参数应该更大.

circleDraw.animate({
    arc: [100, 100, 0, 100, 500]
}, 10000);

因为蓝色圆圈计数10秒,它会再次自动变大.如何让两个圆圈变小但保持定时器倒计时？

我正在考虑停止蓝色圆圈的动画并保存动画的剩余mili秒再次缩小并再次使用剩余的秒数启动动画,但我不知道如何做到这一点.但也许我正在寻找错误的方向,我必须让它与众不同.

谢谢.

我的所有代码:

 /************************************************************************/
/* Raphael JS magic
 *************************************************************************/
var drawTheCircleVector = function(xloc, yloc, value, total, R) {
        var alpha = 360 / total * value,
            a = (90 - alpha) * Math.PI / 180,
            x = xloc + R * Math.cos(a),
            y = yloc - R * Math.sin(a), …

我想在 SVG 中制作这个图形。我可以使用<animate>标签，并且可以使用 javascript 操作 SVG 文档。如果可能的话，我更愿意在 SVG 中完成这一切。

我想将对象移动到scroll =上的svg路径上。帮助!!! =） https://jsfiddle.net/YuriiBielozertsev/Ltx9ed0L/

<?xml version="1.0"?>
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Draw the outline of the motion path in grey, along with 2 small circles at key points -->
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="green" stroke-width="2" fill="none" id="theMotionPath"/>
        <circle cx="10" cy="110" r="3" fill="#000"/>
        <circle cx="110" cy="10" r="3" fill="#000"/>

        <!-- Red circle which will be moved along the motion path. -->
        <circle cx="0" cy="" r="5" fill="red">

        <!-- Define the motion path …

我有一个 SVG 文件，其中的点呈直线。我想要实现的是，当用户将鼠标悬停在 svg 文件上时，点会变成像所附图像一样的微笑。

过渡必须平稳。

这里最好的方法是什么？我可以只使用 css 来完成还是也应该使用 js ？

谢谢

我想在我的网页上添加画笔描边效果动画。我尝试使用转换，但没有成功。我希望画笔描边具有从左到右的擦除动画，以便它显示出来。任何人都可以建议这样做的方法吗？