Jump to content
Search Community

svg in vuejs not found for morphing

mindthegap test
Moderator Tag

Recommended Posts

Hi,

 

I tried to morph 2 simple path, but on the created method I can't find the #fill1 or #outline1 id. In chrome inspector I can see the tag, but the queryselector didn't work. why?

 

EDIT: found the error, I switched the mounted and created method.

 

<template>
    <div>
        <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.9 1190.6" style="enable-background:new 0 0 841.9 1190.6;" xml:space="preserve">
            <svg:style type="text/css">
                .st0{fill:#DAE4E2;}
                .st1{fill:none;stroke:#3D3E3E;stroke-width:3;}
                .st2{fill:#3D3E3E;}
            </svg:style>
            <g id="base-1">
                <path id="fill1" class="st0" d="M69.2,145.1c0,0,3.5-3.2,7.9-1.8c5.6,1.9,8.6,0.7,8.6,0.7s6.8,15.6,6.8,30.4
                    c0,14.8-6.6,37.4,21.6,37.9c28.2,0.4,33.2,1.5,50.2,4.4s33.2,7.7,48-8.4c14.2-15.5,16-18.1,15.9-26.2c0-0.3,0-0.6,0-0.9
                    c-0.2-8.8,3.1-7.1-2.6-11.7c0,0,3.1-2,3.3-3.7c0.2-1.8-1.1-7.3-5.5-10.1c0,0,1.5-6.2-4.6-10.4c-6.2-4.2-22.2-10.8-29.1-22.5
                    c0,0-0.9-3.5-9.7-7.9c-8.8-4.4-11.9-13-14.5-26c-2.6-13-5.5-37.7-14.1-38.8s-11.2,12.3-16.3,5.9c-5.1-6.4-26.4-31.7-48-31.7
                    s-48.4,17.2-61.7,33c0,0-11,10.8-6.8,21.6c0,0,2.9,5.1,3.1,10.8s-0.2,24.2,15,37.2s14.4,19.5,22,20.5
                    C66.9,148.6,69.2,145.1,69.2,145.1"/>
                <path id="outline1" class="st1" d="M69.2,145.1c0,0,3.5-3.2,7.9-1.8c5.6,1.9,8.6,0.7,8.6,0.7s6.8,15.6,6.8,30.4
                    c0,14.8-6.6,37.4,21.6,37.9c28.2,0.4,33.2,1.5,50.2,4.4s33.2,7.7,48-8.4c14.2-15.5,16-18.1,15.9-26.2c0-0.3,0-0.6,0-0.9
                    c-0.2-8.8,3.1-7.1-2.6-11.7c0,0,3.1-2,3.3-3.7c0.2-1.8-1.1-7.3-5.5-10.1c0,0,1.5-6.2-4.6-10.4c-6.2-4.2-22.2-10.8-29.1-22.5
                    c0,0-2.3-4.3-9.7-7.9c-8.8-4.4-11.9-13-14.5-26c-2.6-13-5.5-37.7-14.1-38.8s-11.2,12.3-16.3,5.9c-5.1-6.4-26.4-31.7-48-31.7
                    s-48.4,17.2-61.7,33c0,0-11,10.8-6.8,21.6c0,0,2.9,5.1,3.1,10.8s-0.2,24.2,15,37.2s14.4,19.5,22,20.5
                    C66.9,148.6,69.2,145.1,69.2,145.1z"/>
            </g>
            
            <g id="base-2">
                <path id="fill2" class="st0" d="M205.5,188.2c0,0,1.8,6.2-2,10.4c0,0-12.3,29.3-25.3,30.6s-26.9-11.9-55.7-22.7
                    s-22.5-36.6-22.5-36.6s4.4-15.6,1.1-36.8c0,0-0.4-2-2-1.8s-0.2,3.3-4.4,3.5s-2.6-2.9-7.1-3.3c-4.4-0.4-6.6,4-9,5.1
                    c-2.4,1.1-6.8,0.9-9-2.6c0,0-6,2.2-10.1-2.2s-7.5-0.9-14.1-9c-6.6-8.1-10-15.4-19.8-24c0,0-4.5-2.6-2.6-6.7
                    c2.1-4.7,5.5-12.7,6.8-18.2c1.3-5.5,22-50.9,65.8-50.9s70.5,18.9,84.1,47.3c0,0,5.7-0.1,7.1,4.4c1.3,4.5,1.1,9-2,14.3
                    s-11,17.2-6.8,24s5.5,8.1,5.9,13c0.4,4.8,4.8,18.3,11.9,26.2c7.1,7.9,10.8,16.3,10.8,16.3s3.1,7.3,0.1,8.3
                    C206.8,176.9,209.3,186,205.5,188.2"/>
                <path id="outline2" class="st1" d="M205.5,188.2c0,0,1.8,6.2-2,10.4c0,0-12.3,29.3-25.3,30.6s-26.9-11.9-55.7-22.7
                    s-22.5-36.6-22.5-36.6s4.4-15.6,1.1-36.8c0,0-0.4-2-2-1.8s-0.2,3.3-4.4,3.5s-2.6-2.9-7.1-3.3c-4.4-0.4-6.6,4-9,5.1
                    c-2.4,1.1-6.8,0.9-9-2.6c0,0-6,2.2-10.1-2.2s-7.5-0.9-14.1-9c-6.6-8.1-10-15.4-19.8-24c0,0-4.5-2.6-2.6-6.7
                    c2.1-4.7,5.5-12.7,6.8-18.2c1.3-5.5,22-50.9,65.8-50.9s70.5,18.9,84.1,47.3c0,0,5.7-0.1,7.1,4.4c1.3,4.5,1.1,9-2,14.3
                    s-11,17.2-6.8,24s5.5,8.1,5.9,13c0.4,4.8,4.8,18.3,11.9,26.2c7.1,7.9,10.8,16.3,10.8,16.3s2.1,4.5,0.1,8.3
                    C206.8,176.9,210.2,182.2,205.5,188.2z"/>
            </g>
            

        </svg>
    </div>
</template>

<script>
import { gsap } from "gsap";
import MorphSVGPlugin from "gsap/MorphSVGPlugin";


export default {
  name: 'SchaedelMorph',
  data: function () {
     return {
    // counter: 0,
    // x: 0,
    //   y: 0,
    //   text1: "hallo",
    //   endScale: 0.6,
    //   language_de: ["Tiere","Wirbeltiere","Säugetiere","Primaten","Menschenaffen","Menschen"],
    //   language_en: ["Tiere","Wirbeltiere","Säugetiere","Primaten","Große Menschenaffen","Menschen"],
     }
  },
  props: {
    msg: String
  },
  mounted() {
      console.log("mounted");
      gsap.registerPlugin(MorphSVGPlugin);
      gsap.set("#base-2", {visibility:"hidden"})
      gsap.set("#zaehne-2", {visibility:"hidden"})
      gsap.set("#blend-2", {visibility:"hidden"})
      gsap.set("#zaehne-1", {visibility:"hidden"})
      gsap.set("#blend-1", {visibility:"hidden"})
      // gsap.set("base-2", {visibility:"hidden"})
  },
  created() {
      console.log("created");
      if(document.querySelector("#outline1")) {
          console.log("found... ");
          gsap.to("#outline1", {morphSVG:"#outline2", duration: 2});
      }
    //   gsap.to("#fill1", {morphSVG:"#fill2", duration: 2});
  }

}
</script>

<style scoped>

</style>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...