[CLOSED] [LiveHTML] Inline SVG with <font-face> breaks LiveHTML
#4699
Comments
|
I've boiled it down to just the following: <!DOCTYPE html>
<html>
<body>
<div>
<h1>Look at this tiny little SVG chart</h1>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<font horiz-adv-x="1000">
<font-face font-family="BebasNeue" units-per-em="1000" underline-position="-110" underline-thickness="50" />
</font>
</svg>
</div>
</body>
</html>Perhaps w're attempting to treat the |
|
It's probably because of the hyphen in the |
|
The shadow DOM will uses hyphen tag names (e.g. |
|
Yeah, hyphens are definitely illegal in HTML 5. It's unclear whether the spec allows hyphens in embedded SVG content, but my reading suggests it is still not allowed: "Foreign elements whose start tag is not marked as self-closing can have text, character references, CDATA sections, other elements, and comments, but the text must not contain the character "<" (U+003C) or an ambiguous ampersand." (where the word "elements" links back to the definition above, which says only alphanumeric chars. The W3C validator seems to accept a hyphenated tag inside SVG, but it isn't clear whether it's even checking tag name validity -- outside SVG blocks, it gives the same generic "Content model for element div: Flow content" error for every unknown tag (whether |
|
|
|
Looking at the SVG portion in the HTML5 spec, they don't reference So while it may be illegal in HTML5, it is mandatory for any |
|
Low priority to me |
|
|
|
So what's wrong with the bad file? Live preview looks like this: |
|
I think the issue is that it doesn't update live as you type because it doesn't parse the SVG properly. (I haven't tried it myself though.) |
|
Working example: Broken example: |
|
|
|
It seems like the initial parse is correct, so if you select an element in Brackets right after launching Live Preview, you'll see the correct element highlight in the browser. But if you make any changes, they aren't reflected in the browser correctly - the behavior is similar to #5058. |
Friday Sep 06, 2013 at 21:35 GMT
Originally opened as adobe/brackets#5101
I am unable to get the new LiveHTML feature to work for some pages with Inline SVG content, as I mentioned here on the Google Group.
However, in prepping a sample file that doesn't work I discovered that some pages with SVG content do work. I haven't yet been able to figure out a solid pattern. Here are two sample files:
The text was updated successfully, but these errors were encountered: