主页 / 问题 / 944357
Accepted
Node_pro
Asked:2020-02-13 20:28:46 +0000 UTC2020-02-13 20:28:46 +0000 UTC

具有 d 和 transform 属性的 svg 动画

  • 772

svg给定：具有相同结构的四个文件。每个svg有 4 个path。它们仅在属性 d 和 上有所不同transform。

问题：在属性transform中，它重复翻译两次：

transform="translate(2004.586538, 563.741494) rotate(26.000000) translate(-2004.586538, -563.741494)

如何动画化这个？
我的样品：

<animate xlink:href="#p1" attributeName="d" attributeType="XML" 
    values = "M841.586538,-88.7585061 L3167.58654,-88.7585061 L3167.58654,1216.24149 L1141.58654,1216.24149 C975.901113,1216.24149 841.586538,1081.92692 841.586538,916.241494 L841.586538,-88.7585061 Z; M957.745625,-1216.57773 L3283.74563,-1216.57773 L3283.74563,88.4222735 L1257.74563,88.4222735 C1092.0602,88.4222735 957.745625,-45.8923016 957.745625,-211.577727 L957.745625,-1216.57773 Z" 
    dur="10s" 
    repeatCount="indefinite" 
    fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML"
      type="translate" values="2004.586538, 563.741494; 2120.745625, -564.077727" repeatCount="indefinite" dur="4s" fill="freeze" additive="sum"/>

<animateTransform attributeName="transform" attributeType="XML"
      type="rotate" values="26.000000; -22.000000" repeatCount="indefinite" dur="4s" fill="freeze" additive="sum"/>

链接到四个 SVG

所需结果的视频。观看长达 12 秒

svg

2 个回答

  1. Best Answer

    如果您考虑一下，那么我们可以添加 4并将它们放在后面并rect在它们下面放一些背景..在你的情况下，这是一些我懒得画的普通东西，我在它们下面放了一张普通的照片而且动画甚至不是这个普通的css3动画..我们旋转了一组圆角正方形..并继续观看演示ry="20"viewBoxsmil

    而且该组中的所有方块当然都不会爬出这一事实-它们是为了viewBox

    你可以做同样的事情，无论如何路径也必须扭曲组

    .group {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-20deg);
  animation: r 20s linear infinite;
}

.group rect {
  fill: #7f26e1;
}

@keyframes r {
  0% {
    transform: rotate(20deg)translateX(50px, 0);
  }
  50% {
    transform: rotate(120deg)translate(70px, -20px);
  }
}
    <svg viewBox="0 304 234 228" xmlns="http://www.w3.org/2000/svg">
<image  width="100%" height="100%" x="0" y="304" href="https://www.tokkoro.com/picsup/5226413-perspective-architetcure-building-building-exterior-exterior-blue-sky-lines-skyscraper-sky-window-architecture-tower-office-skyscraper-lines-window-view-cyan-urban-turquoise-teal-highrise-publ.jpg" preserveAspectRatio="none"/>
<g fill="#f00" class="group">
   <rect transform="rotate(44.206037)" x="109.35448" y="-3.4432883" width="214.69048" height="212.42261" rx="20" ry="20" style="paint-order:fill markers stroke"/>
   <rect transform="rotate(44.206037)" x="327.77579" y="-2.6431608" width="214.69048" height="212.42261" rx="20" ry="20" style="paint-order:fill markers stroke"/>
   <rect transform="rotate(44.206037)" x="107.41637" y="213.81729" width="214.69048" height="212.42261" rx="20" ry="20" style="paint-order:fill markers stroke"/>
   <rect transform="rotate(44.206037)" x="326.22729" y="213.50017" width="214.69048" height="212.42261" rx="20" ry="20" style="paint-order:fill markers stroke"/>
  </g>
</svg>

    在这个例子中，我试图展示这个效果是如何实现的——看全屏：

    body{
  background: tomato;
}

.items{
  position: relative;
  display: block;
  overflow: hidden;
  width: 500px;
  height: 500px;
  margin: 20px auto;
}

.viewBox{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.viewBox img{
  display: block;
  width: 100%;
  height: 100%;
}

.outer{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(30deg);
  animation: routing 20s linear infinite;
}

.outer .item{
  width: 800px;
  height: 800px;
  background: tomato;
  position: absolute;
  border-radius: 40px;
}

.item:nth-child(1){
  position: absolute;
  left: -805px;
  top: -805px;
}

.item:nth-child(2){
  position: absolute;
  right: -805px;
  top: -805px;
}

.item:nth-child(3){
  position: absolute;
  left: -805px;
  bottom: -805px;
}

.item:nth-child(4){
  position: absolute;
  right: -805px;
  bottom: -805px;
}

@keyframes routing{
  0%{
    transform: rotate(30deg)translate(20px, 100px);
  }
  50%{
    transform: rotate(-10deg)translate(-20px, 0);
  }
}
    <div class="items">
  <div class="viewBox">
    <img src="https://isstatic.askoverflow.dev/Xnd7m.jpg" alt="">
  </div>
  <div class="outer">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

    • 3

  2. 如果我理解正确的话......

    <animateTransform 
xlink:href="#path7056"
attributeName = "transform"
type = "translate"
from="150 20"
to="0 0"
dur="0.4s"
begin="1s"
fill="freeze"/>
    • 2

相关问题