Inline SVG element shifts hover zone

I've been teaching myself HTML & CSS, and recently got into SVG because I was looking for cross-browser text gradients. I've styled a small button, with a div overlaid to create a shaded transparency effect, an SVG-text-specific div to escape some of the opacity issues, and then the SVG-text centered in the middle of the button.

I've also styled a hover zone to bring the background image back to visibility.

So here's the issue:

In Firefox and Opera, the element extends the :hover zone down and to the right by about 50 pixels each.

But, in Chrome and Safari, it's fine.

I've tried messing with margins and padding, but I'm wondering if it's just an SVG compatibility issue?

Also, the attached code is purely for experimental purposes, it's not for a client or work or anything.

Here's the HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Testing out some designs</title>
    <link rel="stylesheet" tyle="text/css" href="stylesheet.css"/>
</head>

<body>
    <div class="artBox">
        <div class="artBoxButton">
            <div class="buttonSVG">
                <svg>
                    <defs>
                        <linearGradient id="txtgrad" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
                            <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1"/>
                        </linearGradient>
                    </defs>
                    <text 
                        fill="url(#txtgrad)" 
                        style="font-family:'Helvetica Neue','Helvetica','Verdana','Arial',sans-serif;
                        font-size:30px;
                        font-weight:200" 
                        x="15" 
                        y="35">Read More</text>
                </svg>
            </div>
        </div>
    </div>

</body>
</html>

And here's the CSS:

* {
    margin: 0px;
    padding: 0px;
}
.artBox {
    width: 260px; 
    height: 89px;
    border-radius: 10px;
    position: relative;
    top: 10em;
    left: 10em;
    background-image: url('http://i.imgur.com/ki4OY5X.png');
    background-repeat: no-repeat;
}
.artBoxButton {
    text-align: center;
    width: 260px;
    height: 89px;
    background-color: #e6e6e6;
    opacity: 0.9;
    border-radius: 10px;
    box-shadow: 0px 1px 1px 1px #b2b2b2;
    margin: 0px;
}
.artBoxButton:hover {
    opacity: 0.5;
    cursor: pointer;
}
.buttonSVG {
    width: 160px;
    height: 50px;
    position: relative;
    left: 50px; 
    top: 19.5px;
    opacity: 1.0;
}

Again, I've only been writing HTML & CSS for about two weeks, please be gentle..

Solution

You've not specified a height or a width for the <svg> element. I imagine either 100% for each or a height of 160px and a width of 50px is what you want.