Question

有没有办法拉伸svg动画以适应设备的整个屏幕。我想显示以下svg动画的两个实例，这样每个动画填充屏幕宽度的一半。还有办法重新定位视图框svg？

的jsfiddle - https://jsfiddle.net/8omxq2qp/

<svg viewBox="0 0 3387 1270">
<path id="planePath" class="planePath" d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179" />
<g id="plane" transform="translate(-248,-306)">
<path id="note" fill="F23B3B" transform="translate(0,0)" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z" />
 </g>
 <!-- Define the motion path animation -->
 <animateMotion xlink:href="#plane" dur="25s" repeatCount="indefinite" rotate="auto">
 <mpath xlink:href="#planePath" />
 </animateMotion >
 </svg>

CSS

html {background-color: #28505D;}

#plane {position: absolute;top: 20%;}

.planePath {stroke: #D9DADA;stroke-width: .1%;stroke-width: .5%;stroke-dasharray: 1% 2%;stroke-linecap: round;fill: none;}

.fil1 {fill: #D9DADA;}

.fil2 {fill: #C5C6C6;}

.fil4 {fill: #9D9E9E;}

.fil3 {fill: #AEAFB0;}

Answer 1

我希望这可以帮助回答你的问题：

请注意，我将SVG代码包含在HTML文件中具有“响应”类的div中。多次使用相同的SVG时，您只需要更改您可能希望更改的图形的ID名称...例如，注意我添加的#plane2和＃plane3持续时间的变化。然后删除了.svg和#plane定义并添加了.half-responsive和.full-responsive定义，这些定义使svg响应CSS文件中的各种屏幕大小。

html {
    background-color: #28505D;
}

.planePath {
    stroke: #D9DADA;
    stroke-width: .1%;
    stroke-width: .5%;
    stroke-dasharray: 1% 2%;
    stroke-linecap: round;
    fill: none;
}

.fil1 {
    fill: #D9DADA;
}

.fil2 {
    fill: #C5C6C6;
}

.fil4 {
    fill: #9D9E9E;
}

.fil3 {
    fill: #AEAFB0;
}

.half-responsive {
    width: 50%;
    float: left;
}

.full-responsive {
    width: 100%;
    float: left;
}

<!DOCTYPE html>
<html lang="en_us">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="author" content="Franciscus Agnew">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive SVG Animation</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="half-responsive">
    <svg viewBox="0 0 3387 1270">
      <path id="planePath" class="planePath" d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179" />
      <g id="plane" transform="translate(-248,-306)">
        <path id="note" fill="F23B3B" transform="translate(0,0)" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z" />
      </g>

      <!-- Define the motion path animation -->
      <animateMotion xlink:href="#plane" dur="25s" repeatCount="indefinite" rotate="auto">
        <mpath xlink:href="#planePath" />
      </animateMotion>
    </svg>
  </div>
  
  <div class="half-responsive">
    <svg viewBox="0 0 3387 1270">
      <path id="planePath" class="planePath" d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179" />
      <g id="plane2" transform="translate(-248,-306)">
        <path id="note" fill="F23B3B" transform="translate(0,0)" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z" />
      </g>

      <!-- Define the motion path animation -->
      <animateMotion xlink:href="#plane2" dur="50s" repeatCount="indefinite" rotate="auto">
        <mpath xlink:href="#planePath" />
      </animateMotion>
    </svg>
  </div>

  <div class="full-responsive">
    <svg viewBox="0 0 3387 1270">
      <path id="planePath" class="planePath" d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179" />
      <g id="plane3" transform="translate(-248,-306)">
        <path id="note" fill="F23B3B" transform="translate(0,0)" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z" />
      </g>

      <!-- Define the motion path animation -->
      <animateMotion xlink:href="#plane3" dur="80s" repeatCount="indefinite" rotate="auto">
        <mpath xlink:href="#planePath" />
      </animateMotion>
    </svg>
  </div>
</body>

</html>

或者，Adobe Animate CC对于为多种屏幕尺寸设置动画SVG内容所需的工作将是一个巨大的帮助。

干杯！

Answer 2

您可以删除SVG中的任何内部宽度声明并使用

svg {
  width: 50%;
  float: left;
}

＆＃13;

html {
  background-color: #28505D;
}
svg {
  width: 50%;
  float: left;
}
.planePath {
  stroke: #D9DADA;
  stroke-width: .1%;
  stroke-width: .5%;
  stroke-dasharray: 1% 2%;
  stroke-linecap: round;
  fill: none;
}
.fil1 {
  fill: #D9DADA;
}
.fil2 {
  fill: #C5C6C6;
}
.fil4 {
  fill: #9D9E9E;
}
.fil3 {
  fill: #AEAFB0;
}

＆＃13;

<svg viewBox="0 0 3387 1270">
  <path id="planePath" class="planePath" d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179" />
  <g id="plane" transform="translate(-248,-306)">
    <path id="note" fill="F23B3B" transform="translate(0,0)" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z" />
  </g>
  <!-- Define the motion path animation -->
  <animateMotion xlink:href="#plane" dur="25s" repeatCount="indefinite" rotate="auto">
    <mpath xlink:href="#planePath" />
  </animateMotion>
</svg>
<svg viewBox="0 0 3387 1270">
  <path id="planePath" class="planePath" d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179" />
  <g id="plane2" transform="translate(-248,-306)">
    <path id="note" fill="F23B3B" transform="translate(0,0)" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z" />
  </g>
  <!-- Define the motion path animation -->
  <animateMotion xlink:href="#plane2" dur="25s" repeatCount="indefinite" rotate="auto">
    <mpath xlink:href="#planePath" />
  </animateMotion>
</svg>

＆＃13;

JSFiddle Demo

这里需要注意的一件事（ inadvereant pun ）...我不得不更改第二个＆＃34;注意＆＃34;的ID。否则它不会出现在第二个SVG中。

也就是说，如果您多次使用SVG，我建议您创建def并使用几个use元素。

将svg调整为页面宽度

2 个答案: