html - Firefox throwing error while reading #hex color codes inside inline SVG -
this doesn't happen on chrome, happen on ff , ms edge, @ least. in ff, when try paint svg inside of css url()
or object
tag, if svg contains #hex color #ff0000
, crash. let me show example:
<p>not using # colors</p> <object type="image/svg+xml" data="data:image/svg+xml;charset=utf-8,<?xml version='1.0' encoding='utf-8'?><svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewbox='0 0 100 100' xml:space='preserve'><circle fill='red' cx='50' cy='54.7' r='15.72'/></svg>"> no svg utf8 </object> <p>using #hex colors (won't show on ff)</p> <object type="image/svg+xml" data="data:image/svg+xml;charset=utf-8,<?xml version='1.0' encoding='utf-8'?><svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewbox='0 0 100 100' xml:space='preserve'><circle fill='#ff0000' cx='50' cy='54.7' r='15.72'/></svg>"> no svg utf8 </object>
why happen? there other way in svg write colors?
a hash character in url reserved indicate start of fragment identifier.
you need url encode # %23.
it's chrome bug not enforce rule or indeed parse urls correctly.
Comments
Post a Comment