SVG包括仅用于IE的JS文件

Question

我正在尝试将SVG动画生成器添加到http://preloaders.net项目，一切都很好，但Internet Explorer的问题-它不支持简单的<animateTransform>，所以我必须在svg文件中包含一个JS库来解决这个问题，但我正在努力使最终的svg图像尽可能优化，所以我需要该库只包含IE的JS文件。我是SVG的新手，找不到任何独立SVG文件的解决方案。我需要这样的东西：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.0"
width="128"
height="128"
viewBox="0 0 128 128"
xml:space="preserve">
<!--[if IE]>
<script type="text/ecmascript" xlink:href="smilIE.js"/>
<![endif]-->
<defs>
<style>
.cls-1 {
fill: #1cd3a2;
fill-rule: evenodd;
}
</style>
</defs>
<g>
<path id="Spinners_AJAX_loaders" data-name="Spinners AJAX loaders" class="cls-1" d="M118.748,57.281a11.55,11.55,0,0,0-8.437-3.576,11.994,11.994,0,0,0-11.89,11.926,11.88,11.88,0,0,0,11.89,11.858,11.533,11.533,0,0,0,8.437-3.508A11.675,11.675,0,0,0,118.748,57.281ZM95.928,88.449a10.466,10.466,0,0,0-7.734,3.128,10.2,10.2,0,0,0-3.131,7.574,10.561,10.561,0,0,0,3.131,7.725,10.431,10.431,0,0,0,7.734,3.113,10.318,10.318,0,0,0,7.607-3.113,10.518,10.518,0,0,0,3.261-7.725,10.16,10.16,0,0,0-3.261-7.574A10.356,10.356,0,0,0,95.928,88.449Zm1.6-42.645a13.072,13.072,0,0,0,12.976-13,13.007,13.007,0,1,0-26.014,0A13.07,13.07,0,0,0,97.526,45.8ZM62.178,102.28a9.329,9.329,0,0,0-6.9,2.868,9.5,9.5,0,0,0-2.813,6.949,9.2,9.2,0,0,0,2.813,6.813,9.87,9.87,0,0,0,13.805,0,9.191,9.191,0,0,0,2.876-6.813,9.573,9.573,0,0,0-2.876-7.017A9.4,9.4,0,0,0,62.178,102.28Zm0-97.081a13.6,13.6,0,0,0-9.971,4.079,13.379,13.379,0,0,0-4.089,9.887,13.651,13.651,0,0,0,4.089,10.008,14.225,14.225,0,0,0,19.943,0A13.712,13.712,0,0,0,76.3,19.165,13.439,13.439,0,0,0,72.15,9.278,13.606,13.606,0,0,0,62.178,5.2ZM28.492,39.236a6.314,6.314,0,0,0,4.6-1.849,6.513,6.513,0,0,0,0-9.234,6.571,6.571,0,0,0-9.14,0A6.466,6.466,0,0,0,28.492,39.236Zm0,50.546a8.571,8.571,0,0,0-6.135,2.624A7.99,7.99,0,0,0,19.8,98.39a8.292,8.292,0,0,0,2.558,6.119,8.516,8.516,0,0,0,12.272,0,8.3,8.3,0,0,0,2.556-6.119,7.989,7.989,0,0,0-2.556-5.983A8.574,8.574,0,0,0,28.492,89.782ZM18.65,60.273a7.2,7.2,0,0,0-5.307-2.23,7.481,7.481,0,0,0-5.434,2.23,7.257,7.257,0,0,0-2.172,5.358,7.428,7.428,0,0,0,7.606,7.587,7.151,7.151,0,0,0,5.307-2.175,7.463,7.463,0,0,0,2.237-5.412A7.319,7.319,0,0,0,18.65,60.273Z"/>
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="4s" repeatCount="indefinite"></animateTransform>
</g>
</svg>

这部分是HTML的常见解决方法，但SVG有这样的东西吗？我可以做一些包含该文件的JS编码，但我想知道是否有"短代码"解决方案。

提前谢谢。

Answer 1

理论上，您可以为此使用switch-元素和requiredFeatures属性。但不幸的是，你不能。

https://bugs.chromium.org/p/chromium/issues/detail?id=682228

编辑

这并不能真正起作用，因为所有其他浏览器都支持switch和requiredFeatures，但不会绕过子元素。除了第一个元素之外，所有元素都不会被渲染，但脚本元素无论如何都会运行。我认为这是违反规范的…

chrome错误报告

编辑2

SVG2:中对此进行了"澄清">

"条件处理对从不呈现没有影响要素；特别是，条件处理不会影响处理"style"或"script"元素。">

https://svgwg.org/svg2-draft/struct.html#ConditionalProcessing

FWIW，我不认为1.1的意图是"可切换"，因为它们不是"渲染"/渲染的一部分树看到这里和那里有可互操作的行为行为被指定，我将不得不称之为WontFix。很抱歉

所以这将不起作用：-(您将不得不使用脚本化的解决方案…

我将把答案留在这里，以备参考。。。

"switch"元素评估"requiredFeatures"，"requiredExtensions"one_answers"systemLanguage"属性子元素，然后处理和渲染第一个这些属性评估为true的子项。所有其他人绕过并因此不呈现。

因此，在开关中有一个g元素，requiredFeatures="http://www.w3.org/TR/SVG11/feature#Animation"作为第一个元素，脚本元素作为第二个元素。第一个元素应该适用于所有支持SMIL的客户端，第二个元素适用于所有其他客户端。。。

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="128" height="128" viewBox="0 0 128 128">
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Animation">
<text y="20">Animation</text>
<script>
alert("animation")
</script>
</g>
<g>
<text y="40">No Animation</text>
<script>
alert("no animation")
</script>
</g>
<defs>
<style>
.cls-1 {
fill: #1cd3a2;
fill-rule: evenodd;
}
</style>
</defs>
<g>
<path id="Spinners_AJAX_loaders" data-name="Spinners AJAX loaders" class="cls-1" d="M118.748,57.281a11.55,11.55,0,0,0-8.437-3.576,11.994,11.994,0,0,0-11.89,11.926,11.88,11.88,0,0,0,11.89,11.858,11.533,11.533,0,0,0,8.437-3.508A11.675,11.675,0,0,0,118.748,57.281ZM95.928,88.449a10.466,10.466,0,0,0-7.734,3.128,10.2,10.2,0,0,0-3.131,7.574,10.561,10.561,0,0,0,3.131,7.725,10.431,10.431,0,0,0,7.734,3.113,10.318,10.318,0,0,0,7.607-3.113,10.518,10.518,0,0,0,3.261-7.725,10.16,10.16,0,0,0-3.261-7.574A10.356,10.356,0,0,0,95.928,88.449Zm1.6-42.645a13.072,13.072,0,0,0,12.976-13,13.007,13.007,0,1,0-26.014,0A13.07,13.07,0,0,0,97.526,45.8ZM62.178,102.28a9.329,9.329,0,0,0-6.9,2.868,9.5,9.5,0,0,0-2.813,6.949,9.2,9.2,0,0,0,2.813,6.813,9.87,9.87,0,0,0,13.805,0,9.191,9.191,0,0,0,2.876-6.813,9.573,9.573,0,0,0-2.876-7.017A9.4,9.4,0,0,0,62.178,102.28Zm0-97.081a13.6,13.6,0,0,0-9.971,4.079,13.379,13.379,0,0,0-4.089,9.887,13.651,13.651,0,0,0,4.089,10.008,14.225,14.225,0,0,0,19.943,0A13.712,13.712,0,0,0,76.3,19.165,13.439,13.439,0,0,0,72.15,9.278,13.606,13.606,0,0,0,62.178,5.2ZM28.492,39.236a6.314,6.314,0,0,0,4.6-1.849,6.513,6.513,0,0,0,0-9.234,6.571,6.571,0,0,0-9.14,0A6.466,6.466,0,0,0,28.492,39.236Zm0,50.546a8.571,8.571,0,0,0-6.135,2.624A7.99,7.99,0,0,0,19.8,98.39a8.292,8.292,0,0,0,2.558,6.119,8.516,8.516,0,0,0,12.272,0,8.3,8.3,0,0,0,2.556-6.119,7.989,7.989,0,0,0-2.556-5.983A8.574,8.574,0,0,0,28.492,89.782ZM18.65,60.273a7.2,7.2,0,0,0-5.307-2.23,7.481,7.481,0,0,0-5.434,2.23,7.257,7.257,0,0,0-2.172,5.358,7.428,7.428,0,0,0,7.606,7.587,7.151,7.151,0,0,0,5.307-2.175,7.463,7.463,0,0,0,2.237-5.412A7.319,7.319,0,0,0,18.65,60.273Z"
/>
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="4s" repeatCount="indefinite"></animateTransform>
</g>
</svg>