<image> tag inside SVG gets replaced with <img> #1922

Closed
maciejjankowski opened this Issue Jul 31, 2016 · 13 comments

Projects

None yet

2 participants

@maciejjankowski
maciejjankowski commented Jul 31, 2016 edited

I have a template which is used to generate SVG with images and texts.
Problem arises when I have <image> tag inside - it is being replaced by <img> and it doesn't show up because it is not a valid SVG tag.

  1. Can you reproduce the issue?

two examples
http://jsbin.com/komafar/1/edit?html,js,output <- here the image tag is replaced with img in both FF and Chrome

http://plnkr.co/edit/MdUnwWvfjtwGYiNxqGGm?p=preview <- here, the images created in a loop do not load despite having xhref:link

  1. On which browser/OS does the issue appear?
    Chrome, FF
  2. Which version of Riot does it affect?
    2.5
  3. How would you tag this issue?
    • Question
    • Bug
    • Discussion
    • Feature request
    • Tip
    • Enhancement
    • Performance
@GianlucaGuarini
Member
GianlucaGuarini commented Jul 31, 2016 edited

@maciejjankowski In your demo you are using riot@2.3 The current riot release supports properly the svg tags please upgrade
Your example with riot@2.5 http://jsbin.com/maxosaqira/1/edit?html,js,output

@maciejjankowski

@GianlucaGuarini the example you provided doesnt work either - there are 2 images there - one within tag and this one doesn't show.
and here, with fixed closing
http://jsbin.com/cenuga/1/edit?html,js,output
still doesnt' work.

see the inspector:
image

what could be the source of the problem?

@GianlucaGuarini
Member
GianlucaGuarini commented Aug 1, 2016 edited

http://jsbin.com/yobepizimu/1/edit?html,js,output your svg size was too small, that's why you don't see your image

@GianlucaGuarini
Member

Please make sure to understand how svg work before using them with riot. You can find many useful info here http://www.w3schools.com/svg/svg_inhtml.asp

@maciejjankowski
maciejjankowski commented Aug 2, 2016 edited

note to self: check #1199
seems to be an issue with attributes from another namespace
will investigate further

@maciejjankowski

@GianlucaGuarini I have investigated the problem.

  1. I do understand enough SVG to tell that the sample I provided had three images displayed with 3 different approaches. Only one of them worked and maybe that made you think the problem was elsewhere...
  2. the actual problem is that setAttr function does not check for the attributes belonging to other namespaces.
  3. The quick and ugly fix is this:
    image

but I don't have enough knowledge of riot to make it prettier and general purpose.

Without that modification the image tag does not work in SVG

@GianlucaGuarini
Member

@maciejjankowski thanks for digging it. Could you please open a new issue with a demo example where the problem appears? The previous demos provided were all working

@GianlucaGuarini
Member
GianlucaGuarini commented Aug 9, 2016 edited

It seems vue has solved the link in the same way https://github.com/vuejs/vue/blob/dev/dist/vue.js#L5470 so probably a pull request with a test would be awesome. I will reopen the current issue tagging it as bug

@maciejjankowski

I will be glad to do so.

9 sie 2016 20:51 "Gianluca Guarini" notifications@github.com napisał(a):

It seems vue has solved the link in the same way
https://github.com/vuejs/vue/blob/dev/dist/vue.js#L5470 so probably a
pull request with a test would be awesome. I will reopen the current issue
marking it as bug


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1922 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ACxXi9akojSbgRPQ57xBIYqM_vhc9Pmyks5qeMwSgaJpZM4JZCQ4
.

@maciejjankowski
maciejjankowski commented Aug 10, 2016 edited

The complete solution I had in mind was to handle all namespaced attributes by traversing the DOM tree up to find the proper namespace declaration and memoize the results to avoid extra traversals, but I found out that the SVG tag had no attributes I could read at the moment of setting the attribute value (at breakpoint):
image

xmlns:xlink attribute is empty when hitting the breakpoint but after rendering is complete it is there - and this behavior makes it impossible to make a universal solution as described above.

Are there any alternatives you could suggest?

@GianlucaGuarini
Member

The issue was fixed and we will release a new riot release soon

@GianlucaGuarini
Member

@maciejjankowski could you test riot from here http://plnkr.co/edit/uXQ8ElvL9WFqZsIkGQkp?p=preview and tell me if it works for you please?

@maciejjankowski

hey,
yes it works fine.

I tried to run the tests and asked about it on gitter but to no avail.

How would you write tests for this function?

@GianlucaGuarini GianlucaGuarini added a commit that closed this issue Aug 20, 2016
@GianlucaGuarini GianlucaGuarini closes #1922 b8db001
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment