<br /> tag ends up getting doubled

[memloom-development]

My input document uses the br tag inside of a foreign object. It uses the form <br />
The regex in svg() continues to produce valid markup:

"this is valid <br />".replace(/<(\w+)([^<]+?)\/>/g, '<$1$2></$1>')

produces what it should produce:

"this is valid <br ></br>"

However, then along comes the assignment to well.innerHTML and (on Chrome Version 35.0.1916.114) the HTML parser messes everything up. It replaces the correctly closed br tag with two unclosed br tags - as can be seen by the following console output

> well.innerHTML = "this is valid <br />".replace(/<(\w+)([^<]+?)\/>/g, '<$1$2></$1>')
"this is valid <br ></br>"
> well.innerHTML
"this is valid <br><br>"  // it's still valid html markup but not valid svg nor does it match the initial format

I don't think the regex should be changed - but there may need to be special handling for br (and hr plus any others?)

[wout]

Unfortunately I can't help you with HTML inside a foreignObject as it is not related to svg or svg.js. I think stackoverflow will be the place to be.

[memloom-development]

I have a hackish fix in place - I break the well formed tag by replacing <br /> with <br> so that your regex fixes them and it seems to give me the desired output. I'm not entirely sure why that works - but it does.

However, I think the "ultimate" solution would be for your import routine to not touch anything inside of a foreignObject tag. As you rightly say the content inside of the foreignObject tag is nothing to do with svg - because of that the contents shouldn't really be affected by your import routine...

However, I'm sure it's a low priority edge case for svg.js to deal with.

[wout]

Great to hear you found a fix. Although, it might be a good idea to rework the import plugin to "adopt" html nodes in the foreignObject rather than importing them individually.