1206221 - drawImage fails when foreignObject contains # (pound sign) in HTML

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[[e-mail]]

Attachment: drawimage-error.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36

Steps to reproduce:

Tried to use drawImage() to add an image data URI to a canvas.


Actual results:

If the content within <foreignObject> contains a "#", FF throws an error. For instance, as in the attached example, if "red" is given as the color within a style attribute everything works fine. However, if "#FF0000" is given as the color, FF throws an error and won't draw the image on the canvas.


Expected results:

In both cases of the attached example, an image of red "a" should have been drawn on the canvas.

Comment 1

[Robert Longson [:longsonr]]

because # is reserved to be the start of a fragment identifier in a URL and is invalid unless URL encoded.

Comment 2

[[e-mail]]

(In reply to Robert Longson from comment #1)
> because # is reserved to be the start of a fragment identifier in a URL and
> is invalid unless URL encoded.

Interestingly, Chrome doesn't have a problem with "#". I did find some useful tips: http://codepen.io/AmeliaBR/details/xijuv/

"P.S. This is a simple example, but for more complex SVG files like this one, this is your checklist for getting them to work in a data URI in NON-Internet Explorer browsers without resorting to unreadable and uneditable base-64 encoding:

Start the uri with data:image/svg+xml;charset=UTF-8, and note the punctuation. You can skip the charset declaration if you're only using ASCII characters; in that case, skip the semi-colon as well, but leave in the final comma.
After the comma, enter your code starting with the SVG start tag. You don't need a doctype, but you do need the xmlns='http://www.w3.org/2000/svg' attribute in the svg tag.
Replace all linebreaks in your svg code with plain spaces. For good measure, replace tabs too, though it should still work with them (but really, without linebreaks they do nothing to enhance readability). This can be skipped if the data URI is going to be referenced within your HTML file (e.g., as an <img> source), but is required for putting the data URI in a CSS file url() function.
Use only one type of quotation marks in your svg code (single or double). Wrap the entire URI (including the data: part) in the other type of quotes.
Replace any # characters in the code with %23 and any % (or at least those that are followed by a hex digit) with %25; if you're doing an automated find and replace, remember to encode the real percentage signs before you start adding in extra percent characters by encoding other characters.
If there are any close tags within the string which could be mis-interpreted as a close tag from an element outside the string (e.g. a closing style tag for a data URI within embedded CSS, such as is used in CodePen), then URL-encode at least one character of that tag: replacing the / with %2F works.
If the URI is in a context where you only want to refer to a specific SVG fragment, such as in this filter example, add the #id after the closing svg tag, but within your outermost quotation marks.
It's possible there are other characters or situations where you might need some url-encoding, but that should get over the most common "why is this not working?" frustrations.

However, again, this only works in non-IE browsers. You'll need to completely URL-encode (or base64 encode) the text for IE. Which unfortunately means that you can't use this method for public/final websites, but it's great for development and exploration."