Skip to content

keyframes get stripped, animation broken #32

@ghost

Description

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions