SVG仅包含用于IE的JS文件

时间：2017-01-11 13:23:38

标签： internet-explorer svg svg-animate

我正在尝试将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编码，但我想知道是否有“短代码”解决方案。

提前致谢。

1 个答案:

答案 0 :(得分：1)

从理论上讲，您可以使用switch - 元素和requiredFeatures属性。但遗憾的是你不能。

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

修改

这不起作用，因为所有其他浏览器都支持switch和requiredFeatures，但不绕过子元素。除了第一个元素之外的所有元素都不会呈现，但脚本元素仍会运行。我认为这违背了规范......

chrome bug report

编辑2

  

这已在SVG2中得到“澄清”：

     

“条件处理对永不渲染没有影响   要素;特别是条件处理不会影响   处理'style'或'script'元素。“

     

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

     

FWIW，我不认为1.1中的意图是s   “可切换”，因为它们不是“渲染”/渲染的一部分   树。看到这里和那里存在可互操作的行为   行为是指，我将不得不称之为WontFix。遗憾。

所以这不起作用:-(你将不得不求助于使用脚本化的解决方案......

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

  

'switch'元素评估'requiredFeatures'，   'requiredExtensions'和'systemLanguage'属性直接   子元素按顺序排列，然后处理并呈现第一个元素   这些属性评估为true的子项。所有其他人都将   被绕过，因此没有呈现。

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

相关问题
最新问题