Add href to allowed attributes for animation elements.

svg · Aug 19, 2024 · 474654c · 474654c
1 parent 9078e8c
commit 474654c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/plugins/_collections.js b/plugins/_collections.js
@@ -118,6 +118,7 @@ export const attrsGroups = {
   animationAddition: new Set(['additive', 'accumulate']),
   animationAttributeTarget: new Set(['attributeType', 'attributeName']),
   animationEvent: new Set(['onbegin', 'onend', 'onrepeat', 'onload']),
+  animationTargetElement: new Set(['href']),
   animationTiming: new Set([
     'begin',
     'dur',
@@ -493,6 +494,7 @@ export const elems = {
       'animationAddition',
       'animationAttributeTarget',
       'animationEvent',
+      'animationTargetElement',
       'animationTiming',
       'animationValue',
       'conditionalProcessing',
@@ -522,6 +524,7 @@ export const elems = {
     attrsGroups: new Set([
       'animationAddition',
       'animationEvent',
+      'animationTargetElement',
       'animationTiming',
       'animationValue',
       'conditionalProcessing',
@@ -546,6 +549,7 @@ export const elems = {
       'animationAddition',
       'animationAttributeTarget',
       'animationEvent',
+      'animationTargetElement',
       'animationTiming',
       'animationValue',
       'conditionalProcessing',
@@ -1742,6 +1746,7 @@ export const elems = {
     attrsGroups: new Set([
       'animation',
       'animationAttributeTarget',
+      'animationTargetElement',
       'animationTiming',
       'conditionalProcessing',
       'core',

diff --git a/test/plugins/removeUnknownsAndDefaults.17.svg.txt b/test/plugins/removeUnknownsAndDefaults.17.svg.txt
@@ -0,0 +1,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>