svgo/test/plugins/removeUnknownsAndDefaults.18.svg.txt at 3a461990ec8af288e6394bc1ebe541fb87502107 · svg/svgo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
Preserve both xlink:href and href attributes in animation elements.

See: https://github.com/svg/svgo/issues/2061

===

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <animate href="#a" attributeName="fill-opacity" values="0;1" dur="4s" fill="freeze" />
    <animate xlink:href="#b" attributeName="fill-opacity" values="0;1" dur="4s" fill="freeze" />
    <circle id="a" cx="12" cy="12" r="8" fill="green" fill-opacity="0"/>
    <circle id="b" cx="36" cy="12" r="8" fill="blue" fill-opacity="0"/>

    <animateMotion href="#c" dur="10s" repeatCount="indefinite" path="M20,30 h60 z" />
    <animateMotion xlink:href="#d" dur="10s" repeatCount="indefinite" path="M0,30 h60 z" />
    <circle id="c" r="5" fill="red"/>
    <circle id="d" r="5" fill="orange"/>

    <animateTransform href="#e" attributeName="transform" attributeType="XML" type="rotate" from="0 5 50" to="360 5 50" dur="10s" repeatCount="indefinite" />
    <animateTransform xlink:href="#f" attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="10s" repeatCount="indefinite" />
    <rect id="e" x="5" y="50" width="10" height="8" fill="yellow"/>
    <rect id="f" x="50" y="50" width="10" height="8" fill="pink"/>

    <set href="#g" attributeName="r" to="20" begin="1s" dur="2s" />
    <set xlink:href="#h" attributeName="r" to="20" begin="1s" dur="2s" />
    <circle id="g" cx="10" cy="70" r="5" fill="purple"/>
    <circle id="h" cx="30" cy="70" r="5" fill="silver"/>
</svg>

@@@

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <animate href="#a" attributeName="fill-opacity" values="0;1" dur="4s" fill="freeze"/>
    <animate xlink:href="#b" attributeName="fill-opacity" values="0;1" dur="4s" fill="freeze"/>
    <circle id="a" cx="12" cy="12" r="8" fill="green" fill-opacity="0"/>
    <circle id="b" cx="36" cy="12" r="8" fill="blue" fill-opacity="0"/>
    <animateMotion href="#c" dur="10s" repeatCount="indefinite" path="M20,30 h60 z"/>
    <animateMotion xlink:href="#d" dur="10s" repeatCount="indefinite" path="M0,30 h60 z"/>
    <circle id="c" r="5" fill="red"/>
    <circle id="d" r="5" fill="orange"/>
    <animateTransform href="#e" attributeName="transform" attributeType="XML" type="rotate" from="0 5 50" to="360 5 50" dur="10s" repeatCount="indefinite"/>
    <animateTransform xlink:href="#f" attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="10s" repeatCount="indefinite"/>
    <rect id="e" x="5" y="50" width="10" height="8" fill="yellow"/>
    <rect id="f" x="50" y="50" width="10" height="8" fill="pink"/>
    <set href="#g" attributeName="r" to="20" begin="1s" dur="2s"/>
    <set xlink:href="#h" attributeName="r" to="20" begin="1s" dur="2s"/>
    <circle id="g" cx="10" cy="70" r="5" fill="purple"/>
    <circle id="h" cx="30" cy="70" r="5" fill="silver"/>
</svg>