Re: background for text
Hi Dao, Response inline... interesting, I never think filter oriented... but if I want to highlight a filled shape, the yellow never appears, isn't it? FWIW, I never saw a way to highlight shapes which works well in all situations. For example, popular ways to highlight objects are: 1. Use a particular stroke/fill color. How will you highlight a shape which by coincidence is in that particular color? 2. Revert colors (a.k.a. XOR mode). How will you highlight a shape which is mid-tone gray? 3. Use the shape's bounding box. If the shape is very large and you are zooming in, for example, you won't have a clue that the shape is selected. Also, this is not quite a highlight... I'd advise you to take a look at existing vector graphics editors, such as Inkscape (which seems to use approach 3) and Sketsa (which seems to use approach 1; as a matter of curiosity, it's based in Batik), in order to figure out general approaches to the problem. Also, Batik Squiggle also has a shape highlighting feature (which seems to use approach 2): checkout Tools/DOM Viewer.../Click to enable highlight of selected node. Note that the shape highlight doesn't seem to be working well with complex SVG files, but you may use a very simple SVG [1] just to have a feeling: I've just reported bug 48468 to track it down... ;-) Hope this helps, Helder [1] http://heldermagalhaes.com/stuff/svg/demos/SVGObject-HTMLCanvasInteractors/sample.svg [2] https://issues.apache.org/bugzilla/show_bug.cgi?id=48468 - To unsubscribe, e-mail: batik-users-unsubscr...@xmlgraphics.apache.org For additional commands, e-mail: batik-users-h...@xmlgraphics.apache.org
Re: background for text
Dao Hodac: interesting, I never think filter oriented... but if I want to highlight a filled shape, the yellow never appears, isn't it? If it’s a rectangle, yes, unless you set the filter region to extend beyond the shape’s bounding box. However, when filterUnits=objectBoundingBox (the default), you can only use percentages of the bounding box width/height, so it’s not possible to set a fixed number of units units worth of padding, for example. If you used filterUnits=userSpaceOnUse you could specify some user units for the filter region, but then you need to know the size of the shape you are applying the filter to. The filter primitive margin attributes from the SVG 1.2 Filters spec would let you keep objectBoundingBox mode while giving some user unit values to inflate the filter region rectangle by: http://www.w3.org/TR/SVGFilter12/#FilterElementFilterMarginUnitsAttribute That is not yet implemented in Batik, though. -- Cameron McCormack ≝ http://mcc.id.au/ - To unsubscribe, e-mail: batik-users-unsubscr...@xmlgraphics.apache.org For additional commands, e-mail: batik-users-h...@xmlgraphics.apache.org
Re: background for text
interesting, I never think filter oriented... but if I want to highlight a filled shape, the yellow never appears, isn't it? On Tue, Dec 22, 2009 at 12:05 AM, Cameron McCormack c...@mcc.id.au wrote: dao: I'd like to highlight a text element of my svg file: text transform=matrix(1 0 0 1 433.8965 494.4141) style=fill:#00; font-family:'CourierNewPSMT'; font-size:24;00.00/text I cannot see any way to set the background of a text, or to get the box size to draw a rectangle around it. Do you know how I can do this? A hacky way of declaratively drawing background for your text is to use a filter: svg xmlns='http://www.w3.org/2000/svg' font-size='24' filter id='f' x='0' y='0' width='100%' height='100%' feFlood flood-color='yellow' result='bg'/ feMerge feMergeNode in='bg'/ feMergeNode in='SourceGraphic'/ /feMerge /filter text x='20' y='100' filter='url(#f)'Hello there/text /svg The overhead of doing this is probably much greater than computing the bounding box of the text and inserting a rect to draw the background, though. -- Cameron McCormack ≝ http://mcc.id.au/ - To unsubscribe, e-mail: batik-users-unsubscr...@xmlgraphics.apache.org For additional commands, e-mail: batik-users-h...@xmlgraphics.apache.org -- Dao Hodac
background for text
hello, I'd like to highlight a text element of my svg file: text transform=matrix(1 0 0 1 433.8965 494.4141) style=fill:#00; font-family:'CourierNewPSMT'; font-size:24;00.00/text I cannot see any way to set the background of a text, or to get the box size to draw a rectangle around it. Do you know how I can do this? regards -- Dao Hodac
Re: background for text
SVGRect bbox =
((SVGLocatable)textNode).getBBox();
Element rect =
doc.getElementById(my-bg-rect);
if (rect == null) {
rect =
doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, rect);
rect.setAttributeNS(null, id,
my-bg-rect);
rect.setAttributeNS(null, fill,
#CCDDFF);
rect.setAttributeNS(null, stroke,
#00);
rect.setAttributeNS(null,
stroke-width, 3);
}
On Mon, Dec 21, 2009 at 3:07 PM, dao dao.ho...@gmail.com wrote:
hello,
I'd like to highlight a text element of my svg file:
text transform=matrix(1 0 0 1 433.8965 494.4141) style=fill:#00;
font-family:'CourierNewPSMT'; font-size:24;00.00/text
I cannot see any way to set the background of a text, or to get the box
size to draw a rectangle around it.
Do you know how I can do this?
regards
--
Dao Hodac
Re: background for text
Sorry for the very incomplete code clipping. This is from a test case I
sent to the list a few days ago...nabble, etc will likely yield the entire
file
.here is a better cut:
SVGRect bbox =
((SVGLocatable)textNode).getBBox();
Element rect =
doc.getElementById(my-bg-rect);
if (rect == null) {
rect =
doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, rect);
rect.setAttributeNS(null, id,
my-bg-rect);
rect.setAttributeNS(null, fill,
#CCDDFF);
rect.setAttributeNS(null, stroke,
#00);
rect.setAttributeNS(null,
stroke-width, 3);
}
rect.setAttributeNS(null, x, +
(bbox.getX() - 10) );
rect.setAttributeNS(null, y, +
(bbox.getY() - 10) );
rect.setAttributeNS(null, width, +
(bbox.getWidth() + 20) );
rect.setAttributeNS(null, height, +
(bbox.getHeight() + 20) );
doc.getDocumentElement().insertBefore(rect,
textNode);
On Mon, Dec 21, 2009 at 3:41 PM, jonathan wood
jonathanshaww...@gmail.comwrote:
SVGRect bbox =
((SVGLocatable)textNode).getBBox();
Element rect =
doc.getElementById(my-bg-rect);
if (rect == null) {
rect =
doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, rect);
rect.setAttributeNS(null, id,
my-bg-rect);
rect.setAttributeNS(null, fill,
#CCDDFF);
rect.setAttributeNS(null, stroke,
#00);
rect.setAttributeNS(null,
stroke-width, 3);
}
On Mon, Dec 21, 2009 at 3:07 PM, dao dao.ho...@gmail.com wrote:
hello,
I'd like to highlight a text element of my svg file:
text transform=matrix(1 0 0 1 433.8965 494.4141) style=fill:#00;
font-family:'CourierNewPSMT'; font-size:24;00.00/text
I cannot see any way to set the background of a text, or to get the box
size to draw a rectangle around it.
Do you know how I can do this?
regards
--
Dao Hodac
Re: background for text
that quick!!
but the rect does not fits my locatable... it has not the right size and is
stucked on the top left corner of my canvas...
any idea?
On Mon, Dec 21, 2009 at 9:44 PM, jonathan wood
jonathanshaww...@gmail.comwrote:
Sorry for the very incomplete code clipping. This is from a test case I
sent to the list a few days ago...nabble, etc will likely yield the entire
file
.here is a better cut:
SVGRect bbox =
((SVGLocatable)textNode).getBBox();
Element rect =
doc.getElementById(my-bg-rect);
if (rect == null) {
rect =
doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, rect);
rect.setAttributeNS(null, id,
my-bg-rect);
rect.setAttributeNS(null, fill,
#CCDDFF);
rect.setAttributeNS(null, stroke,
#00);
rect.setAttributeNS(null,
stroke-width, 3);
}
rect.setAttributeNS(null, x, +
(bbox.getX() - 10) );
rect.setAttributeNS(null, y, +
(bbox.getY() - 10) );
rect.setAttributeNS(null, width, +
(bbox.getWidth() + 20) );
rect.setAttributeNS(null, height, +
(bbox.getHeight() + 20) );
doc.getDocumentElement().insertBefore(rect,
textNode);
On Mon, Dec 21, 2009 at 3:41 PM, jonathan wood jonathanshaww...@gmail.com
wrote:
SVGRect bbox =
((SVGLocatable)textNode).getBBox();
Element rect =
doc.getElementById(my-bg-rect);
if (rect == null) {
rect =
doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, rect);
rect.setAttributeNS(null, id,
my-bg-rect);
rect.setAttributeNS(null, fill,
#CCDDFF);
rect.setAttributeNS(null, stroke,
#00);
rect.setAttributeNS(null,
stroke-width, 3);
}
On Mon, Dec 21, 2009 at 3:07 PM, dao dao.ho...@gmail.com wrote:
hello,
I'd like to highlight a text element of my svg file:
text transform=matrix(1 0 0 1 433.8965 494.4141) style=fill:#00;
font-family:'CourierNewPSMT'; font-size:24;00.00/text
I cannot see any way to set the background of a text, or to get the box
size to draw a rectangle around it.
Do you know how I can do this?
regards
--
Dao Hodac
--
Dao Hodac
Re: background for text
The example uses direct setting of the x, y coordinates. Your example text
node has a transform attribute. You will likely need to transform the
background rectangle also.
On Mon, Dec 21, 2009 at 4:49 PM, dao dao.ho...@gmail.com wrote:
that quick!!
but the rect does not fits my locatable... it has not the right size and is
stucked on the top left corner of my canvas...
any idea?
On Mon, Dec 21, 2009 at 9:44 PM, jonathan wood jonathanshaww...@gmail.com
wrote:
Sorry for the very incomplete code clipping. This is from a test case I
sent to the list a few days ago...nabble, etc will likely yield the entire
file
.here is a better cut:
SVGRect bbox =
((SVGLocatable)textNode).getBBox();
Element rect =
doc.getElementById(my-bg-rect);
if (rect == null) {
rect =
doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, rect);
rect.setAttributeNS(null, id,
my-bg-rect);
rect.setAttributeNS(null, fill,
#CCDDFF);
rect.setAttributeNS(null, stroke,
#00);
rect.setAttributeNS(null,
stroke-width, 3);
}
rect.setAttributeNS(null, x, +
(bbox.getX() - 10) );
rect.setAttributeNS(null, y, +
(bbox.getY() - 10) );
rect.setAttributeNS(null, width, +
(bbox.getWidth() + 20) );
rect.setAttributeNS(null, height, +
(bbox.getHeight() + 20) );
doc.getDocumentElement().insertBefore(rect, textNode);
On Mon, Dec 21, 2009 at 3:41 PM, jonathan wood
jonathanshaww...@gmail.com wrote:
SVGRect bbox =
((SVGLocatable)textNode).getBBox();
Element rect =
doc.getElementById(my-bg-rect);
if (rect == null) {
rect =
doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, rect);
rect.setAttributeNS(null, id,
my-bg-rect);
rect.setAttributeNS(null, fill,
#CCDDFF);
rect.setAttributeNS(null, stroke,
#00);
rect.setAttributeNS(null,
stroke-width, 3);
}
On Mon, Dec 21, 2009 at 3:07 PM, dao dao.ho...@gmail.com wrote:
hello,
I'd like to highlight a text element of my svg file:
text transform=matrix(1 0 0 1 433.8965 494.4141) style=fill:#00;
font-family:'CourierNewPSMT'; font-size:24;00.00/text
I cannot see any way to set the background of a text, or to get the box
size to draw a rectangle around it.
Do you know how I can do this?
regards
--
Dao Hodac
--
Dao Hodac
Re: background for text
oups, I have grabbed the transform attribute, and now, my rect is the right
size, but its bottom left is at the center of the node.
My node is like this:
use xlink:href=#Horizon width=300 height=400 x=-150 y=-200
transform=matrix(0.6881 0 0 -0.6881 142.5107 299.9995) style=
overflow:visible;/
Furthermore, I am trying to replace the rect by a symbol reference. I cannot
succeed in modifying its aspect ratio. is there an attribute to authorize
this? To be more clear, I have drawn a nice rounded rectangle with half
opacity and decorations that I want to draw on top of the targeted node
(here horizon) with the same size.
the targeted node could be a text, that's why my first posted you answered
with the bbox and the SVGLocatable.
On Mon, Dec 21, 2009 at 11:01 PM, jonathan wood
jonathanshaww...@gmail.comwrote:
The example uses direct setting of the x, y coordinates. Your example text
node has a transform attribute. You will likely need to transform the
background rectangle also.
On Mon, Dec 21, 2009 at 4:49 PM, dao dao.ho...@gmail.com wrote:
that quick!!
but the rect does not fits my locatable... it has not the right size and
is stucked on the top left corner of my canvas...
any idea?
On Mon, Dec 21, 2009 at 9:44 PM, jonathan wood
jonathanshaww...@gmail.com wrote:
Sorry for the very incomplete code clipping. This is from a test case I
sent to the list a few days ago...nabble, etc will likely yield the entire
file
.here is a better cut:
SVGRect bbox =
((SVGLocatable)textNode).getBBox();
Element rect =
doc.getElementById(my-bg-rect);
if (rect == null) {
rect =
doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, rect);
rect.setAttributeNS(null, id,
my-bg-rect);
rect.setAttributeNS(null, fill,
#CCDDFF);
rect.setAttributeNS(null, stroke,
#00);
rect.setAttributeNS(null,
stroke-width, 3);
}
rect.setAttributeNS(null, x, +
(bbox.getX() - 10) );
rect.setAttributeNS(null, y, +
(bbox.getY() - 10) );
rect.setAttributeNS(null, width, +
(bbox.getWidth() + 20) );
rect.setAttributeNS(null, height, +
(bbox.getHeight() + 20) );
doc.getDocumentElement().insertBefore(rect, textNode);
On Mon, Dec 21, 2009 at 3:41 PM, jonathan wood
jonathanshaww...@gmail.com wrote:
SVGRect bbox =
((SVGLocatable)textNode).getBBox();
Element rect =
doc.getElementById(my-bg-rect);
if (rect == null) {
rect =
doc.createElementNS(SVGDOMImplementation.SVG_NAMESPACE_URI, rect);
rect.setAttributeNS(null, id,
my-bg-rect);
rect.setAttributeNS(null, fill,
#CCDDFF);
rect.setAttributeNS(null, stroke,
#00);
rect.setAttributeNS(null,
stroke-width, 3);
}
On Mon, Dec 21, 2009 at 3:07 PM, dao dao.ho...@gmail.com wrote:
hello,
I'd like to highlight a text element of my svg file:
text transform=matrix(1 0 0 1 433.8965 494.4141) style=fill:#00;
font-family:'CourierNewPSMT'; font-size:24;00.00/text
I cannot see any way to set the background of a text, or to get the box
size to draw a rectangle around it.
Do you know how I can do this?
regards
--
Dao Hodac
--
Dao Hodac
--
Dao Hodac
Re: background for text
way to set the background of a text, or to get the box size to draw a rectangle around it. Do you know how I can do this? regards -- Dao Hodac -- Dao Hodac -- Dao Hodac
Re: background for text
); rect.setAttributeNS(null, fill, #CCDDFF); rect.setAttributeNS(null, stroke, #00); rect.setAttributeNS(null, stroke-width, 3); } On Mon, Dec 21, 2009 at 3:07 PM, dao dao.ho...@gmail.com wrote: hello, I'd like to highlight a text element of my svg file: text transform=matrix(1 0 0 1 433.8965 494.4141) style=fill:#00; font-family:'CourierNewPSMT'; font-size:24;00.00/text I cannot see any way to set the background of a text, or to get the box size to draw a rectangle around it. Do you know how I can do this? regards -- Dao Hodac -- Dao Hodac -- Dao Hodac -- Dao Hodac
Re: background for text
dao: I'd like to highlight a text element of my svg file: text transform=matrix(1 0 0 1 433.8965 494.4141) style=fill:#00; font-family:'CourierNewPSMT'; font-size:24;00.00/text I cannot see any way to set the background of a text, or to get the box size to draw a rectangle around it. Do you know how I can do this? A hacky way of declaratively drawing background for your text is to use a filter: svg xmlns='http://www.w3.org/2000/svg' font-size='24' filter id='f' x='0' y='0' width='100%' height='100%' feFlood flood-color='yellow' result='bg'/ feMerge feMergeNode in='bg'/ feMergeNode in='SourceGraphic'/ /feMerge /filter text x='20' y='100' filter='url(#f)'Hello there/text /svg The overhead of doing this is probably much greater than computing the bounding box of the text and inserting a rect to draw the background, though. -- Cameron McCormack ≝ http://mcc.id.au/ - To unsubscribe, e-mail: batik-users-unsubscr...@xmlgraphics.apache.org For additional commands, e-mail: batik-users-h...@xmlgraphics.apache.org
