[Webkit-unassigned] [Bug 100269] SVG CSS styling doesn't initially work for SVG in <img>

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=100269





--- Comment #14 from Stephen Chenney <schenney at chromium.org>  2012-12-07 10:15:42 PST ---
(In reply to comment #9)
> Actually I don't get this at all.
> The source for the drop shadow example is
> http://www.voormedia.nl/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility/images/dropshadow-de0ba3e8.svg
> 
> This just has an <image> with a data URI. I don't see any filters there at all. So maybe we're just not loading data URIs?
> 
> But this also makes it not a test of SVG features, suggesting that the page is just bogus. I do notice:
> 
> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

The drop shadow is not a filter or a shadow declaration. Rather, the shadow is a path drawn with black fill, with the fill defined in the <style> block. All the examples use CSS in this way. The font test does not actually load a custom font, it just defines a font face in the style block.

This produces the shadow, or should:
<style type="text/css">
<![CDATA[
    .st0{fill:#DDDDDD;}
]]>
</style>

        <path class="st0" d="M42.5,38.12c0,2.42-1.96,4.38-4.38,4.38H11.88c-2.42,0-4.38-1.96-4.38-4.38V11.88c0-2.42,1.96-4.38,4.38-4.38
            h26.25c2.42,0,4.38,1.96,4.38,4.38L42.5,38.12L42.5,38.12z"/>

Hence, the issue is CSS on the first load/paint of an SVG as-image.

I'm willing to bet that Illustrator's SVG export was explicitly designed to avoid using poorly implemented features (particularly IE previous to IE10). Instead, it uses basic geometry to fake the filter effects.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.