egoist / svg-to-vue-component

Transform SVG files into Vue SFC (with hot reloading and SVGO support)
MIT License
235 stars 18 forks source link

keyframes get stripped, animation broken #32

Open ghost opened 5 years ago

ghost commented 5 years ago

Loading the following svg with the plugin, results in the keyframes being stripped:

<?xml version="1.0" encoding="utf-8"?>
<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 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0 {
  fill: none;
  stroke: #00e3ff;
  stroke-width: 2;
  stroke-linecap: square;
}
.st1 {
  fill: none;
  stroke: #00e3ff;
  stroke-width: 2;
}
#stab {
  stroke-dasharray: 100;
  stroke-dashoffset: 500;
  animation: dash 3s linear infinite;
  animation-direction: reverse;
}
@keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
#oben {
  stroke-dasharray: 100;
  stroke-dashoffset: 500;
  animation: dash2 3s linear infinite;
  animation-direction: reverse;
  animation-delay: 0s;
}
@keyframes dash2 {
  to {
    stroke-dashoffset: 100;
  }
}
#unten {
  stroke-dasharray: 100;
  stroke-dashoffset: 500;
  animation: dash3 3s linear infinite;
  animation-direction: normal;
  animation-delay: 0.7s;
}
@keyframes dash3 {
  to {
    stroke-dashoffset: 100;
  }
}
</style>
<title>Pfeil</title>
<desc>Pfeil</desc>
<g id="pfeil" transform="translate(-770.000000, -4655.000000)">
    <g transform="translate(770.000000, 4656.000000)">
        <path id="unten" class="st0" d="M88.1,54.9L94,49"/>
        <path id="oben" class="st0" d="M94,49l-5.9-5.9"/>
        <path id="stab" class="st1" d="M94,49H4.5"/>
    </g>
</g>
</svg>
<svg version="1.1" id="arrow-animated_svg__Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve" class="sn__arrow left" style="stroke:#00e3ff;fill:#00e3ff;color:#00e3ff;" data-v-19cfc0f7=""><style>.arrow-animated_svg__st0{fill:none;stroke:#00e3ff;stroke-width:2;stroke-linecap:square}</style><g id="arrow-animated_svg__pfeil"><path d="M88.1 54.9L94 49" stroke-dasharray="100" stroke-dashoffset="500" transform="translate(0 1)" class="arrow-animated_svg__st0" style="animation:dash3 3s linear infinite;animation-direction:normal;animation-delay:.7s"></path><path d="M94 49l-5.9-5.9" stroke-dasharray="100" stroke-dashoffset="500" transform="translate(0 1)" class="arrow-animated_svg__st0" style="animation:dash2 3s linear infinite;animation-direction:reverse;animation-delay:0s"></path><path d="M94 50H4.5" stroke-dasharray="100" stroke-dashoffset="500" fill="none" stroke="#00e3ff" stroke-width="2" style="animation:dash 3s linear infinite;animation-direction:reverse"></path></g></svg>

I'm using the plugin in a nuxt.js project. Are there any settings that'll prevent this from happening?