632004 - SVG. Gradient fill from external css-file. bug.

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Dmitriy]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.84 Safari/534.13
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9.2.13) Gecko/20101206 Ubuntu/10.04 (lucid) Firefox/3.6.13

When i use external css-file in my svg and write gradient in defs FF does not apply css by anchor

Reproducible: Always

Steps to Reproduce:
1.open http://vts.delta-pilot.ua/testcase/svg-extcss-gradfill-bug/test.svg
2.are you see the fill? (Google chrome show it.)



Expected Results:  
gradient fill from external css-file

Comment 1

[Robert Longson [:longsonr]]

In your css file you have 

fill:url(#myGradient);

#myGradient expands to http://vts.delta-pilot.ua/testcase/svg-extcss-gradfill-bug/svgstyle.css#myGradient 

and you don't have a myGradient in the css file, it's in the svg file.

Please report this bug to chrome or webkit.

Comment 2

[Robert Longson [:longsonr]]

Partial URLs in stylesheets should be interpreted relative to the stylesheet
source:

http://htmlhelp.com/reference/css/units.html#urls or
http://www.hwg.org/resources/faqs/1cssFAQ.html#relativeURL etc

Comment 3

[Dmitriy]

(In reply to comment #1)
> In your css file you have 
> 
> fill:url(#myGradient);
> 
> #myGradient expands to
> http://vts.delta-pilot.ua/testcase/svg-extcss-gradfill-bug/svgstyle.css#myGradient 
> 
> and you don't have a myGradient in the css file, it's in the svg file.
> 
> Please report this bug to chrome or webkit.

wait. I have object <gradient/> which have id="myGradient" in defs section of svg. When i try insert some <rect> element with attribute style="fill:url(#myGradient);" all work correctly. (check this http://vts.delta-pilot.ua/testcase/svg-extcss-gradfill-bug/test2.svg ) 
When i bring out style in external css-file i see no fill. 

What is principal difference?  

Your links is not answer. hwg.org is HTML-writers, but not SVG:) Svg viewer like "gnome eye" shows my testcase correctly (inkscape too). Either look at this http://helephant.com/2009/08/svg-images-as-css-backgrounds/
In svg using id's in URL is normal practice. It's in standart.

P.S. i will not to write any bug-report to chrome or webkit team. I think it work correctly and firefox have a bug.

Comment 4

[Robert Longson [:longsonr]]

the object with id="myGradient" is in your SVG file. The relative reference to that object is in your CSS file. Expanding the relative reference still leaves you in the CSS file and not the SVG file as you want.

If you put style="fill:url(#myGradient)", you are writing that style in the SVG file so the relative reference expands to the SVG file and it works.

In the example you cite you have url(file.svg) i.e. it's pointing back to the SVG file.

To make your example work you could do the same and point to the SVG file in the CSS file.

Comment 5

[Robert Longson [:longsonr]]

Or in other words if you write #myGradient in the svg file it means

http://vts.delta-pilot.ua/testcase/svg-extcss-gradfill-bug/test.svg#myGradient

If you write #myGradient in the css file it means

http://vts.delta-pilot.ua/testcase/svg-extcss-gradfill-bug/svgstyle.css#myGradient

Only one of these (the first) references the gradient you've defined.

Comment 6

[Dmitriy]

Finally, i understood:). if i will write fill:url(test.svg#myGradient) it works. Thanks!