Open ghost opened 5 years ago
Loading the following svg with the plugin, results in the keyframes being stripped:
svg
<?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?
Loading the following
svg
with the plugin, results in the keyframes being stripped:I'm using the plugin in a nuxt.js project. Are there any settings that'll prevent this from happening?