Gradient on SVG Text using incorrect bounding box

RESOLVED FIXED

Status

()

Core
SVG
RESOLVED FIXED
11 years ago
11 years ago

People

(Reporter: Patrick Sung, Assigned: tor)

Tracking

Trunk
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

11 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0

If we specify a gradient for the fill/stroke property for a text element. The SVG render the text, but using incorrect bounding box. This happens when there are other child element within the <text/> element, for example, if we have a <tspan/> within a <text/> as demonstrated by the SVG code below.


From the SVG 1.1 specification, section 10.4 (The 'text' element) 3rd paragraph:

It is possible to apply a gradient, pattern, clipping path, mask or filter to text. When one of these facilities is applied to text and keyword objectBoundingBox is used (see Object bounding box units) to specify a graphical effect relative to the "object bounding box", then the object bounding box units are computed relative to the entire 'text' element in all cases, even when different effects are applied to different 'tspan' elements within the same 'text' element.


The SVG example below draw a line of text, but inside the <text/> we added a <tspan/> to change the font size and different gradient fill. Had the <tspan/> not exist, the bounding box calculated for the <text/> is correct (from start of <text> to end of </text>). When <tspan/> is child of <text/> the renderer created 3 bounding boxes:
1. <text> to <tspan>
2. <tspan> to </tspan>
3. </tspan> to </text>
This results in 3 gradient instead of 2, which is what we should expect


Reproducible: Always

Steps to Reproduce:
Use the SVG sample code from "details"

Actual Results:  
3 different gradient text produced

Expected Results:  
2 gradient text

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="testrgrad" cx=".5" cy=".5" r=".5" >
      <stop offset="0" stop-color="yellow" />
      <stop offset="1" stop-color="navy" />
</radialGradient>
<linearGradient id="linearGradient01">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="red" />
</linearGradient>
</defs>
<text fill="url(#linearGradient01)" id="mytext" y="50">For example, if the parent element has a font size of "medium", <tspan font-size="40" fill="url(#testrgrad)">in tspan</tspan> a value of "larger" will make the font size of the current element be "large".</text>
</svg>
(Assignee)

Comment 1

11 years ago
Created attachment 244803 [details]
testcase as attachment
(Assignee)

Comment 2

11 years ago
Created attachment 244825 [details] [diff] [review]
deja vu
Assignee: general → tor
Status: UNCONFIRMED → ASSIGNED
Attachment #244825 - Flags: review?(scootermorris)

Updated

11 years ago
Attachment #244825 - Flags: review?(scootermorris) → review+
(Assignee)

Updated

11 years ago
Attachment #244825 - Flags: superreview?(roc)
Attachment #244825 - Flags: superreview?(roc) → superreview+
(Assignee)

Comment 3

11 years ago
Checked in.
Status: ASSIGNED → RESOLVED
Last Resolved: 11 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.