How to position SVG image in div

Cartoper

unread,

Sep 5, 2007, 11:40:58 PM9/5/07

to

I am new to SVG, so please bear with me. I am trying to put an SVG
graphic (an arrow) at the right of some text. My final objective is
to make the SVG graphic scale with the text. Here is what I have so
far, I think I might have mistakes in both the CSS and the SVG, not
100% sure. How do I correct it?

-------- SVG --------
<?xml version="1.0" encoding="UTF-8"?>
<!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" width="0.5in" height="0.5in"
viewBox="0 0 320 320" version="1.1">
<polygon class="arrow" points="0,0 160,160 0,320"
style="fill:#0000ff; stroke:#000000;stroke-width:8"
transform="translate(80, 0)"/>
</svg>

-------- HTML --------
<html>
<style type="text/css">
div.category {
-moz-border-radius: 8px;
display: block;
background: lightyellow;
overflow: hidden;
width: 600px;
text-align:center;
border:1px dashed blue
}

div.subcategory {
-moz-border-radius: 8px;
font-family: Arial;
font-size: 24pt;
display: block;
padding: 6px;
margin: 10px;
text-align:left;
background: lightgray;
}

div.subcategory embed
{
float: right;
}

</style>
<body>
<div class="category">
<div class="subcategory">9am Classes<embed src="arrow-
next.svg"/></div>
<div class="subcategory">10am Classes<embed src="arrow-
next.svg"/></div>
<div class="subcategory">11am Classes<embed src="arrow-
next.svg"/></div>
<div class="subcategory">12pm Classes<embed src="arrow-
next.svg"/></div>
</div>
</body>
</html>

Cartoper

unread,

Sep 6, 2007, 10:25:08 PM9/6/07

to

I played with the code some more and I don't seem to be able to get
the SVG to stay contained in the div. Below is what I have right now,
I cannot figure out how to get the SVG arrows to center vertically and
be right justifed in the div. Does anyone know how to get the SVG
arrows positioned in the div correctly?

Cartoper

--------------- class.html ---------------

<html>
<link rel="stylesheet" type="text/css" href="class.css"/>
<body>
<div class="times">
<div class="startTimes">9am Classes<embed src="arrow.svg"/></
div>
<div class="startTimes">10am Classes<embed src="arrow.svg"/></
div>
<div class="startTimes">11am Classes<embed src="arrow.svg"/></
div>
<div class="startTimes">12pm Classes<embed src="arrow.svg"/></
div>
</div>
</body>
</html>

--------------- arrow.svg ---------------

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet href="class.css" type="text/css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/
Graphics/SVG/1.1/DTD/svg11.dtd">

</svg>

--------------- class.css ---------------

.times {

-moz-border-radius: 8px;
display: block;
background: lightyellow;
overflow: hidden;
width: 600px;
text-align:center;
border:1px dashed blue
}

.startTimes {

-moz-border-radius: 8px;
font-family: Arial;
font-size: 24pt;
display: block;
padding: 6px;
margin: 10px;
text-align: left;
background: lightgray;

position: relative;
}

.startTimes embed {
float: right;
border: 1px solid #000000;

width: 24pt;
height: 24pt;
}

.arrow {
fill: #00ff00;
stroke: #000000;
stroke-width: 1;
}

Jonathan Watt

unread,

Sep 10, 2007, 8:29:19 AM9/10/07

to

Cartoper wrote:
> I played with the code some more and I don't seem to be able to get
> the SVG to stay contained in the div. Below is what I have right now,
> I cannot figure out how to get the SVG arrows to center vertically and
> be right justifed in the div. Does anyone know how to get the SVG
> arrows positioned in the div correctly?
>
> Cartoper
>
> --------------- class.html ---------------
>
> <html>
> <link rel="stylesheet" type="text/css" href="class.css"/>
> <body>
> <div class="times">
> <div class="startTimes">9am Classes<embed src="arrow.svg"/></
> div>

SVG currently doesn't scale when embedded by reference (i.e. using <embed> or
<object>). There's a patch to fix this that should hopefully make it into
Firefox 3 attached to the following bug:

https://bugzilla.mozilla.org/show_bug.cgi?id=294086

Jonathan