Javascript 带SMIL的SVG动画
关于使用smil SVG动画和使用javascript/jquery otf更改内容,我有一些问题Javascript 带SMIL的SVG动画,javascript,jquery,svg,smil,Javascript,Jquery,Svg,Smil,关于使用smil SVG动画和使用javascript/jquery otf更改内容,我有一些问题 <svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 500" enable-background="new
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
以下是我已经尝试过的:
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
HTML/XML:
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
令人钦佩的结果:
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
我希望实现:
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
- 有一个动画循环在不断地运行
- 在事件触发时(如单击、按键等),在当前迭代结束时结束当前正在运行的动画
- 在第一个动画结束时,启动第二个动画 (-重复更多动画) (-理想情况下做同样的事情:从动画2变为动画1)
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
到目前为止发生了什么:
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
- 动画1循环工作正常
- 按键时:
- 案例1(顶行向下时按下):
- 它起作用了
- 案例2(您在顶行上升时按下):
- 静止动画重复一次,然后停止
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
我怎样才能解决这个问题呢?这是一个很难解决的问题……我在这里搞砸了:
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
$(window).keypress(function(e) {//spacebar trigger
if (e.keyCode === 0 || e.keyCode === 32) {
$('#story_1_1_1, #story_1_1_2, #story_1_2_1, #story_1_2_2').attr('end', 'story_2_1_1.begin');
$('#story_2_1_1').attr('begin', '0s;story_2_1_2.end');
}
});
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>