Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some .svg files not showing properly #22

Closed
saint777 opened this issue Aug 31, 2020 · 4 comments
Closed

Some .svg files not showing properly #22

saint777 opened this issue Aug 31, 2020 · 4 comments
Labels
duplicate This issue or pull request already exists

Comments

@saint777
Copy link

saint777 commented Aug 31, 2020

Hello @shrpne some .svg files not loading properly, e.g. this svg only shows arrow, with <img src> it works ok (shadows, backgrounds, borders etc)

Expected: https://i.imgur.com/26X33mD.png
Got this: https://i.imgur.com/AKgdKZS.png

plugin version: 2.0.0

looks like filters doesn't apply properly

<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_d)"> <rect x="15" y="6" width="66" height="66" rx="2" fill="white"/> <rect x="15.5" y="6.5" width="65" height="65" rx="1.5" stroke="#848484"/> </g> <path fill-rule="evenodd" clip-rule="evenodd" d="M48 37.512L37.9693 48L34 44.6383L48 30L62 44.6383L58.0307 48L48 37.512Z" fill="#2F3B45"/> <defs> <filter id="filter0_d" x="0" y="0" width="96" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> <feOffset dy="9"/> <feGaussianBlur stdDeviation="7.5"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> </filter> </defs> </svg>

@shrpne
Copy link
Owner

shrpne commented Aug 31, 2020

It works fine for me
https://codesandbox.io/s/fragrant-currying-jn4lh?file=/src/App.vue

What browser do you use?

@saint777
Copy link
Author

saint777 commented Aug 31, 2020

It works fine for me
https://codesandbox.io/s/fragrant-currying-jn4lh?file=/src/App.vue

What browser do you use?

i'm using Chrome 85

and i'm actually using Nuxt.js
i had to use require
InlineSvg(:src="require('~/assets/img/landing/scroll-to-top.svg')") -> no errors but incorrect svg render

without require
InlineSvg(src="~/assets/img/landing/scroll-to-top.svg") -> vue-inline-svg.js?6d5e:178 GET http://localhost:3040/~/assets/img/landing/scroll-to-top.svg 404 (Not Found)

@saint777
Copy link
Author

i found problem

i had several svgs with same filter ID's

@shrpne
Copy link
Owner

shrpne commented Aug 31, 2020

We have similar issue about unique ids #21, so I close it as duplicate for now

@shrpne shrpne closed this as completed Aug 31, 2020
@shrpne shrpne added the duplicate This issue or pull request already exists label Apr 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants