javascript - 在 Anime.js 中使用 SVG 对象 HTML

Question

我最近在做 Anime.JS。
我成功地使用 keyFrame 功能制作了眨眼效果。
现在我想为 SVG 文件制作动画，以使其更具可读性，我使用这样的对象 html:

 <object id="DranakTitle" data="asset/dranak2.svg" type="image/svg+xml" ></object>

它完美地显示在屏幕上，但是当我想用 Anime.JS 为它设置动画时，它什么都不做，甚至在 JS 控制台中也没有错误。

那里是我的 js 代码(ATM 用于测试动画)

var svgObject = document.getElementById('DranakTitle');
var svgDoc;
svgObject.addEventListener('load', function(){
svgDoc = svgObject.contentDocument; 

 var lineDrawing = anime({
  targets: svgDoc,
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 3000,
 // delay: function(el, i) { return i * 250 },
  direction: 'alternate',
  loop: true
});

});

我想我没有得到anime.js 需要工作的路径，但我不知道如何做到这一点。

告诉我您是否需要其他东西来了解我的问题。

这里的SVG文件:

> <svg id="b08a73a6-c8cf-4eae-8175-56e92cb07c01" data-name="Calque 2"
> xmlns="http://www.w3.org/2000/svg"
> xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 938 242">  
> <title>dranak2</title>   <image width="938" height="242"
> xlink:href="dranak21.png"/>   <g>
>     <path d="M498.66,433.62H438.14q-3.64,0-3.64,3.12V552.07q0,3.64,3.64,3.64h60.52a45.15,45.15,0,0,0,18.57-3.64,41.24,41.24,0,0,0,13.9-9.87,42.31,42.31,0,0,0,8.7-14.67,54.57,54.57,0,0,0,3-18.32,56.24,56.24,0,0,0-3-18.7,42.17,42.17,0,0,0-8.73-14.81A40.14,40.14,0,0,0,517.15,466a47,47,0,0,0-18.63-3.5H468.28q-3.39,0-3.39,3.37V539.6q0,2.08-1.8,1.95a1.74,1.74,0,0,1-1.81-1.95V465.83q0-6.75,7-6.75H498.4a49.76,49.76,0,0,1,19.87,3.76A41.21,41.21,0,0,1,533,473.37a48.09,48.09,0,0,1,9.22,15.84,59.21,59.21,0,0,1,3.25,20,57.59,57.59,0,0,1-3.25,19.48,49.59,49.59,0,0,1-9.22,16,41.83,41.83,0,0,1-14.68,10.78,48.09,48.09,0,0,1-19.87,3.9H438.08a6.93,6.93,0,0,1-5.15-2.08,7.08,7.08,0,0,1-2.07-5.2V436.74a6.62,6.62,0,0,1,2.08-5.07,7.31,7.31,0,0,1,5.2-1.94h60.52A75.47,75.47,0,0,1,529.44,436a72.75,72.75,0,0,1,24.29,17.14,80.52,80.52,0,0,1,15.85,25.33,85.82,85.82,0,0,1,0,61.56,78.8,78.8,0,0,1-15.85,25.2,73.42,73.42,0,0,1-24.29,17,75.47,75.47,0,0,1-30.78,6.24H438.14a7.31,7.31,0,0,1-5.2-2,6.92,6.92,0,0,1-2.08-5.32V570.26c0-1.56.61-2.34,1.82-2.34s1.82.78,1.82,2.34v10.91q0,3.63,3.64,3.63h60.52a71.77,71.77,0,0,0,29.35-6,70.49,70.49,0,0,0,23.25-16.37,76,76,0,0,0,15.2-24,78,78,0,0,0,5.45-29.23,79.59,79.59,0,0,0-5.45-29.61,74.15,74.15,0,0,0-15.2-24A69.78,69.78,0,0,0,528,439.47,73,73,0,0,0,498.66,433.62Z"
> transform="translate(-389 -385)" fill="aqua"/>
>     <path d="M711.92,580.13l-42.08-51.44-1.3-1.81,2.34-.78a47.53,47.53,0,0,0,19.87-17.54,46.39,46.39,0,0,0,7.4-25.58,49.12,49.12,0,0,0-3.89-19.49,51.27,51.27,0,0,0-10.52-15.84,49.15,49.15,0,0,0-35.2-14.55H595.29c-2.08,0-3.12,1.22-3.12,3.64v14a2,2,0,0,1-2.08,1.29,2,2,0,0,1-2.07-1.29v-14a6.65,6.65,0,0,1,2.07-5.07,7.31,7.31,0,0,1,5.2-1.94h53.25a52.74,52.74,0,0,1,20.91,4.15,53.5,53.5,0,0,1,17,11.43A55.63,55.63,0,0,1,698,462.2,50.36,50.36,0,0,1,702.31,483a47.07,47.07,0,0,1-7.79,26.23A54.71,54.71,0,0,1,674,527.91l41.3,50.92q2.6,3.38,1.3,6.49t-5.72,3.12H687.24a10.1,10.1,0,0,1-8-3.64l-40.52-50.13h-13q-3.64,0-3.64,3.64v42.86q0,7.27-6.75,7.27h-20a7.31,7.31,0,0,1-5.2-2,7,7,0,0,1-2.07-5.32V465.57a7.74,7.74,0,0,1,2.07-5.71,7,7,0,0,1,5.2-2.08h53.25a21.39,21.39,0,0,1,9.48,2.08,22.05,22.05,0,0,1,7.27,5.58A26.76,26.76,0,0,1,670,473.5a27.13,27.13,0,0,1,1.69,9.48,25.16,25.16,0,0,1-6.37,17.14q-6.36,7.28-16.75,7.27H625.68a7.45,7.45,0,0,1-5.06-1.68,6.36,6.36,0,0,1-2-5.07V470.51c0-1.39.56-1.95,1.69-1.69s1.68.82,1.68,1.69v30.13q0,3.38,3.64,3.38h22.86a17.73,17.73,0,0,0,14.29-6.54,22.55,22.55,0,0,0,0-29.4,17.88,17.88,0,0,0-14.29-6.4H595.29q-3.12,0-3.12,3.64V581.17q0,3.63,3.12,3.63h20q3.38,0,3.38-3.63V538.31a6.54,6.54,0,0,1,7-7.28h14.55l42.08,51.17a5.31,5.31,0,0,0,4.93,2.6h23.64c2.08,0,3-.47,2.73-1.43A10.55,10.55,0,0,0,711.92,580.13Z"
> transform="translate(-389 -385)" fill="aqua"/>
>     <path d="M811.41,436.74a4.4,4.4,0,0,0-1.82-2.86,5.46,5.46,0,0,0-2.86-.78H778.42a5.69,5.69,0,0,0-2.73.78,3.49,3.49,0,0,0-1.69,2.86l-4.15,11.43c-.35,1.39-1.09,1.91-2.21,1.56s-1.52-1.21-1.17-2.6l3.9-11.95a8.16,8.16,0,0,1,8-5.45h28.31q5.71,0,8.06,5.45l49.09,145q1.56,3.63-.39,6a6.86,6.86,0,0,1-5.59,2.34H835.83q-5.73,0-7.54-6l-6.49-18.7a5.62,5.62,0,0,0-1.56-2.6c-.35-.34-1.3-.52-2.86-.52H768a5,5,0,0,0-4.68,3.12l-6,18.7q-1.3,6-8,6H727.51c-2.6,0-4.47-.78-5.59-2.34s-1.25-3.55-.39-6l38.7-115.08q1.82-5.44,8.32-5.45h17.66a8.17,8.17,0,0,1,8,5.45l21.56,67H769.33l14.28-44.16c.35-1.21,1.08-1.64,2.21-1.3s1.43,1.22.91,2.6l-12.47,38.7h36.63l-20-62.08a4.69,4.69,0,0,0-4.68-3.12H768.55q-3.9,0-4.68,3.12L724.65,581.17c-.7,2.42.26,3.63,2.86,3.63h21.82q3.88,0,4.67-3.11l5.72-19.23c1.72-3.63,4.5-5.45,8.31-5.45h49.35q6.24,0,7.8,5.45l6.23,19.23q.78,3.1,4.42,3.11H857.9q4.15,0,2.6-3.63Z"
> transform="translate(-389 -385)" fill="aqua"/>
>     <path d="M965.44,436.74v96.11L903.62,435.7A2.74,2.74,0,0,0,901.8,434a9,9,0,0,0-2.59-.39H882.32c-1.39-.34-2.08-1-2.08-1.95s.69-1.6,2.08-1.94h16.89a10.59,10.59,0,0,1,4.54,1,8.28,8.28,0,0,1,3.51,3.12l54.55,87.28V436.74a7.18,7.18,0,0,1,1.8-5.07,6.67,6.67,0,0,1,5.16-1.94h20.11a6.75,6.75,0,0,1,5,1.94,6.89,6.89,0,0,1,1.94,5.07V581.17a7.18,7.18,0,0,1-2,5.32,6.83,6.83,0,0,1-5,2h-14q-4.14,0-6.09-2.34a64,64,0,0,1-4-5.45Q944,547.4,923.14,514.54T881.8,448.43V581.17q0,3.63,3.64,3.63h20q3.12,0,3.12-3.63V509.73a1.74,1.74,0,0,1,1.82-2c1.2-.08,1.81.57,1.81,2v71.44a7.22,7.22,0,0,1-1.94,5.32,6.55,6.55,0,0,1-4.81,2h-20q-7.28,0-7.27-7.27V443a1.87,1.87,0,0,1,1.42-1.82c.95-.34,1.86.26,2.73,1.82q22.08,34.56,43.38,68.45t42.6,68.19c1,1.39,1.91,2.59,2.6,3.63s2.08,1.56,4.16,1.56h14q3.38,0,3.38-3.63V436.74q0-3.12-3.38-3.12H968.82Q965.45,433.62,965.44,436.74Z" transform="translate(-389 -385)" fill="aqua"/>
>     <path d="M1097.66,436.74a4.36,4.36,0,0,0-1.82-2.86,5.45,5.45,0,0,0-2.85-.78h-28.32a5.69,5.69,0,0,0-2.73.78,3.48,3.48,0,0,0-1.68,2.86l-4.16,11.43c-.35,1.39-1.08,1.91-2.21,1.56s-1.52-1.21-1.17-2.6l3.9-11.95q2.34-5.46,8.05-5.45H1093q5.7,0,8,5.45l49.09,145q1.56,3.63-.39,6a6.85,6.85,0,0,1-5.58,2.34h-22.08c-3.81,0-6.33-2-7.53-6l-6.5-18.7a5.62,5.62,0,0,0-1.56-2.6c-.35-.34-1.3-.52-2.85-.52h-49.36a5,5,0,0,0-4.67,3.12l-6,18.7q-1.31,6-8.05,6h-21.82q-3.9,0-5.59-2.34t-.39-6l38.71-115.08q1.82-5.44,8.31-5.45h17.66q5.71,0,8.06,5.45l21.56,67h-46.5l14.29-44.16a1.59,1.59,0,0,1,2.21-1.3c1.12.35,1.42,1.22.9,2.6l-12.46,38.7h36.62l-20-62.08a4.69,4.69,0,0,0-4.68-3.12H1054.8q-3.9,0-4.67,3.12L1010.9,581.17q-1,3.63,2.86,3.63h21.82c2.6,0,4.15-1,4.67-3.11l5.72-19.23q2.6-5.44,8.31-5.45h49.36q6.22,0,7.79,5.45l6.23,19.23q.78,3.1,4.42,3.11h22.08c2.77,0,3.63-1.21,2.6-3.63Z"
> transform="translate(-389 -385)" fill="aqua"/>
>     <path d="M1280.79,581.17l-55.59-74.3L1278.45,437c1.56-2.25,1-3.38-1.81-3.38H1253a4.65,4.65,0,0,0-3.38,1,23.73,23.73,0,0,0-2.34,2.86l-49.09,63.12v80.53q0,7.27-7,7.27h-20.26q-6.75,0-6.75-7.27V436.74a7.45,7.45,0,0,1,1.69-5.07,6.32,6.32,0,0,1,5.06-1.94h20.26a6.76,6.76,0,0,1,5.2,1.94,7.15,7.15,0,0,1,1.82,5.07v42.34c0,.87-.61,1.3-1.82,1.3s-1.82-.43-1.82-1.3V436.74q0-3.12-3.38-3.12h-20.26c-2.08,0-3.11,1-3.11,3.12V581.17c0,2.42,1,3.63,3.11,3.63h20.26q3.38,0,3.38-3.63v-81l49.62-64.42a26.07,26.07,0,0,1,3.89-4.42,7.33,7.33,0,0,1,4.94-1.55h23.64c2.76,0,4.63,1,5.58,3s.65,4.2-.91,6.63l-51.69,67.53,53,71.44a7.87,7.87,0,0,1,2.34,6.62q-.53,3.51-6,3.51h-23.64a8,8,0,0,1-7.53-4.16l-42.6-56.37c-1-.86-1.08-1.68-.13-2.46a1.82,1.82,0,0,1,2.73.13l42.6,56.62a5.31,5.31,0,0,0,4.93,2.6H1279C1281.4,584.8,1282,583.59,1280.79,581.17Z"
> transform="translate(-389 -385)" fill="aqua"/>   </g> </svg>

德拉纳克

Ps:我是法国人，所以如果我的英语不好，很抱歉

Answer 1

首先你的 SVG 需要一个 stroke-width ，所以它可以被动画化。

拿个 window.onload初始化动画的函数 后 SVG 已加载:

window.onload = function () {
  anime({
    targets: document.getElementById('DranakTitle').contentDocument.getElementsByTagName('path'),
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 3000,
    direction: 'alternate',
    loop: true
  });
};

这应该可以正常工作。