SVG 包含仅适用于 IE 的 JS 文件

Question

我正在尝试将 SVG 动画生成器添加到 http://preloaders.net 项目，一切正常，但 Internet Explorer 问题 - 它不支持简单 <animateTransform>，所以我必须在其中包含一个 JS 库一个解决这个问题的 svg 文件，但我试图使最终的 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 编码，但我想知道是否有 "short code" 解决方案。

提前致谢。

Answer 1

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

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

编辑

这实际上不起作用，因为所有其他浏览器都支持 switch 和 requiredFeatures，但不绕过子元素。除了第一个元素之外的所有元素都不会被渲染，但是脚本元素无论如何都会运行。我认为那不符合规范...

chrome bug report

编辑 2

This has been "clarified" in SVG2:

"conditional processing will have no effect on never-rendered elements; in particular, conditional processing does not affect the processing of a ‘style’ or ‘script’ element."

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

FWIW, I don't think the intention in 1.1 was for s to be "switchable" since they are not "rendered" / part of the rendering tree. Seeing that there's interoperable behavior here and that behavior is specced, I will have to call this WontFix. Sorry.

所以这行不通:-(您将不得不求助于使用脚本解决方案...

我会在这里留下答案以供记录之用...

The ‘switch’ element evaluates the ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ attributes on its direct child elements in order, and then processes and renders the first child for which these attributes evaluate to true. All others will be bypassed and therefore not rendered.

所以有一个 g-element，其中 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Animation" 作为开关内的第一个元素，script-element 作为第二个元素。第一个元素应该适用于所有支持 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>

SVG 包含仅适用于 IE 的 JS 文件

SVG including JS file for IE only

internet-explorer

svg

svg-animate