Cannot figure out how to disable the `clipPath` added by dotlottie

richardlampitt commented 3 months ago

Hello there!

I'm working with some animations for a client currently, and we need to disable / remove the clipPath that dotlottie is adding in to the rendered SVG.

For example - in this particular code, the clipPath with the id __lottie_element_123 is what I would like to disable / remove:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1078 811" width="1078" height="811" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;" preserveAspectRatio="xMidYMid meet">
<defs>
  <clipPath id="__lottie_element_123">
    <rect width="1078" height="811" x="0" y="0"></rect>
  </clipPath>
</defs>
<g> [...] </g>
</svg>

However, I can't for the life of me find nor figure out where or how to accomplish this.

Can someone more familiar with the project please guide me to the documentation or share with me the instructions needed to accomplish this please?

Many thanks!

theashraf commented 3 months ago

Hi @richardlampitt, may I know which player you're using? The dotlottie-web player doesn't have an SVG renderer 😕

richardlampitt commented 3 months ago

dotlottie-player.zip

Hi @richardlampitt, may I know which player you're using? The dotlottie-web player doesn't have an SVG renderer 😕

We're using a file named 'dotlottie-player.js', which begins with these lines:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DotLottiePlayer = {}));
})(this, (function (exports) { 'use strict';
  var Ll=Object.defineProperty;var hu=Object.getOwnPropertyDescriptor;var cr=(t,e)=>()=>(t&&(e=t(t=0)),e);

and has these comments regarding bundled license info at the end of the file:

/*! Bundled license information:

  is-buffer/index.js:
    (*!
     * Determine if an object is a Buffer
     *
     * @author   Feross Aboukhadijeh <https://feross.org>
     * @license  MIT
     *)
  */
  /*! Bundled license information:

  xstate/es/_virtual/_tslib.js:
    (*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** *)
  */
  /*! Bundled license information:

  howler/dist/howler.js:
    (*!
     *  howler.js v2.2.3
     *  howlerjs.com
     *
     *  (c) 2013-2020, James Simpson of GoldFire Studios
     *  goldfirestudios.com
     *
     *  MIT License
     *)
    (*!
     *  Spatial Plugin - Adds support for stereo and 3D audio where Web Audio is supported.
     *  
     *  howler.js v2.2.3
     *  howlerjs.com
     *
     *  (c) 2013-2020, James Simpson of GoldFire Studios
     *  goldfirestudios.com
     *
     *  MIT License
     *)
  */
  /*! Bundled license information:

  lottie-web/build/player/lottie_worker.js:
    (*!
     Transformation Matrix v2.0
     (c) Epistemex 2014-2015
     www.epistemex.com
     By Ken Fyrstenberg
     Contributions by leeoniya.
     License: MIT, header required.
     *)
  */
  /*! Bundled license information:

  lottie-web/build/player/lottie_light.js:
    (*!
     Transformation Matrix v2.0
     (c) Epistemex 2014-2015
     www.epistemex.com
     By Ken Fyrstenberg
     Contributions by leeoniya.
     License: MIT, header required.
     *)
  */
  /*! Bundled license information:

  lottie-web/build/player/lottie_svg.js:
    (*!
     Transformation Matrix v2.0
     (c) Epistemex 2014-2015
     www.epistemex.com
     By Ken Fyrstenberg
     Contributions by leeoniya.
     License: MIT, header required.
     *)
  */
  /*! Bundled license information:

  lottie-web/build/player/lottie_light_canvas.js:
    (*!
     Transformation Matrix v2.0
     (c) Epistemex 2014-2015
     www.epistemex.com
     By Ken Fyrstenberg
     Contributions by leeoniya.
     License: MIT, header required.
     *)
  */
  /*! Bundled license information:

  lottie-web/build/player/lottie_canvas.js:
    (*!
     Transformation Matrix v2.0
     (c) Epistemex 2014-2015
     www.epistemex.com
     By Ken Fyrstenberg
     Contributions by leeoniya.
     License: MIT, header required.
     *)
  */
  /*! Bundled license information:

  lottie-web/build/player/lottie_light_html.js:
    (*!
     Transformation Matrix v2.0
     (c) Epistemex 2014-2015
     www.epistemex.com
     By Ken Fyrstenberg
     Contributions by leeoniya.
     License: MIT, header required.
     *)
  */
  /*! Bundled license information:

  lottie-web/build/player/lottie_html.js:
    (*!
     Transformation Matrix v2.0
     (c) Epistemex 2014-2015
     www.epistemex.com
     By Ken Fyrstenberg
     Contributions by leeoniya.
     License: MIT, header required.
     *)
  */
  /*! Bundled license information:

  @lit/reactive-element/css-tag.js:
    (**
     * @license
     * Copyright 2019 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/reactive-element.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  lit-html/lit-html.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  lit-element/lit-element.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  lit-html/is-server.js:
    (**
     * @license
     * Copyright 2022 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/decorators/custom-element.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/decorators/property.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/decorators/state.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/decorators/base.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/decorators/event-options.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/decorators/query.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/decorators/query-all.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/decorators/query-async.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/decorators/query-assigned-elements.js:
    (**
     * @license
     * Copyright 2021 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)

  @lit/reactive-element/decorators/query-assigned-nodes.js:
    (**
     * @license
     * Copyright 2017 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     *)
  */

Edit: Figured it would make sense to provide the entire file for reference as well. I've attached dotlottie.js in a zip.

theashraf commented 3 months ago

Thanks @richardlampitt, I think you're using the deprecated dotlottie player which uses lottie-web as an SVG renderer.

It's not related to this project.

Have you tried to select and remove that node using javascript ?

something like

const undesiredElement = querySelector("#__lottie_element_123");
if(undesiredElement) {
    undesiredElement.remove();
}

LottieFiles / dotlottie-web

Cannot figure out how to disable the `clipPath` added by dotlottie #243