Question

如何使用JavaScript触发动画在嵌入式SVG中播放？我使用<object>标记嵌入SVG以保留可选文本。

我正在考虑在SVG中使用CSS转换和在页面上使用JS添加的类，但是SVG没有选择该类。 SVG托管在CDN上，因此浏览器会阻止使用contentDocument。有没有办法解决这个问题？

我的测试页面上的HTML：

<div class="container">
    <object type="image/svg+xml" style="width:100px;" class="inactive" data="css_test.plain.svg"></object>
</div>

SVG（由Inkscape生成，有一个矩形和CSS来改变颜色以进行测试）：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 100 100"
   height="100"
   width="100">
  <defs
     id="defs4">
     <style>
     .inactive rect {
        fill: #00ff00 !important;
     }
     .active rect {
        fill: #0000ff !important;
     }
     </style>
  </defs>
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(0,-952.36216)"
     id="layer1">
    <rect
       y="952.36218"
       x="0"
       height="100"
       width="100"
       id="rect4136"
       style="opacity:1;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.025, 5;stroke-dashoffset:0;stroke-opacity:0" />
  </g>
</svg>

编辑：是否可以挂钩滚动事件并从SVG内部获取窗口中的位置？

在嵌入式SVG中触发动画

0 个答案: