Some questions about using a SVG file in an object element

Hello everybody,

I am new to this list and I also just started to work with SVG graphics/ files mainly for using them in responsive layouts.

I stumbled across several issues which you might help me with - many thanks in advance.

1. I have a SVG file which consits of a single <text> node. Also the used font-family is embedded in the file (only the used characters). And I have defined some <linearGradient>s each with an ID because I would like to change the fill using Javascript.

Now the first "problem" is, that in some Webkit based browsers like Chrome the text fill is not applied as expected. Instead it seems that the browser threads the dimensions of the file much larger than it actually is, so that the offset doesn't "fit".

For Chrome I found out by chance that the existence of: text-rendering="geometricPrecision" causes the trouble. After deleting it in the <svg> Chrome displays the fill like Firefox and IE (and as intended).
Other Webkit based browser like the native Android browser still do not show it correctly.

Is there a way to achieve the same representation in at least as many browsers as possible?

2. In the same file there should be some kind of "circle" around the first letter ('W'). Actually this is a group of shapes. Now I need the part of them, which is visually behind the letter. to cut off so that it does not shine through in case the lettering has an opacity.

Any advice how to achieve this best?

Many thanks for your help, hints and tips!

Greetings

Gunther