Seguinte galera, to tentando usar svg na minha página, pra ficar mais bonita. Entretanto, eu to digitando o svg direto na página, e não em um arquivo separado(quero evitar vários arquivos). Consegui usar através de xhtml, mas eu to com algumas dificulades:
Não consigo alinhar de jeito nenhum o svg a esquerda. Ele fica centralizado na div. Eu ja tentei alterar o view box, mas mesmo assim ele se deforma um pouco, alguém sabe com fazer? Segue o código:
<?xml-stylesheet type="text/xsl" href="identity.xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1"></meta>
<title>Auto-Aprendizado</title>
<link href="estilo.css" type="text/css" rel="stylesheet" ></link>
<link type="text/css" rel="stylesheet" href="dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script language="javascript" src="dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script language="javascript" src="dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script language="javascript" src="dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
</script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="nicEdit.js"></script>
<script type="text/javascript" >
request_source = onnavigate("request_source", function(data)
{
requereEmAjax(data);
});
</script>
</head>
<body >
<div id="global">
<div id="topo">
<div id="sup-topo">
<svg:svg version="1.1" baseProfile="full" viewBox="0 0 100 100" x= "0" y="0" style="float:left;top:0; left:0; text-align:left;">
<svg:linearGradient id="gradient">
<svg:stop style="stop-color:DarkKhaki;" offset="0%"/>
<svg:stop style="stop-color:DarkKhaki;" stop-opacity="0" offset="100%"/>
</svg:linearGradient>
<svg:path d="M100,100 h-100 a100,100 0 0,1 100,-100 z h2500 v-100 h-2500 z" style="fill:url(#gradient)" />
</svg:svg>
</div>
<div id="esq-topo">
<div id="esq-topo-1">
</div>
<div id="esq-topo-2">
</div>
<div id="esq-topo-3">
</div>
<div id="esq-topo-4">
</div>
<div id="esq-topo-5">
</div>
<div id="esq-topo-6">
</div>
</div>
<div id="cen-topo">
<div id="titulo"></div>
<div id="subtitulo">Porque "não se pode ensinar coisa alguma a alguém; pode-se apenas auxiliar a descobrir por si mesmo."
<br/> <spam style="text-align: left;">[Galileu Galilei] </spam> </div>
</div>
<div id="dir-topo">
<div id="dir-topo-1">
</div>
<div id="dir-topo-2">
</div>
<div id="dir-topo-3">
</div>
<div id="dir-topo-4">
</div>
<div id="dir-topo-5">
</div>
<div id="dir-topo-6">
</div>
</div>
<div id="inf-topo">
<div id="inf-topo-6">
<div id="inf-topo-l1">
</div>
<div id="inf-topo-l2">
</div>
<div id="inf-topo-l3">
</div>
<div id="inf-topo-l4">
</div>
<div id="inf-topo-l5">
</div>
<div id="inf-topo-l6">
</div>
<div id="inf-topo-l7">
</div>
<div id="inf-topo-l8">
</div>
<div id="inf-topo-l9">
</div>
<div id="inf-topo-l10">
</div>
</div>
<div id="inf-topo-5">
</div>
<div id="inf-topo-4">
</div>
<div id="inf-topo-3">
</div>
<div id="inf-topo-2">
</div>
<div id="inf-topo-1">
</div>
</div>
</div>
<div id="menu">
<div id="sup-menu">
<div id="sup-menu-1">
<div id="sup-menu-l1">
</div>
<div id="sup-menu-l2">
</div>
<div id="sup-menu-l3">
</div>
<div id="sup-menu-l4">
</div>
<div id="sup-menu-l5">
</div>
<div id="sup-menu-l6">
</div>
<div id="sup-menu-l7">
</div>
<div id="sup-menu-l8">
</div>
<div id="sup-menu-l9">
</div>
<div id="sup-menu-l10">
</div>
</div>
<div id="sup-menu-2">
</div>
<div id="sup-menu-3">
</div>
<div id="sup-menu-4">
</div>
<div id="sup-menu-5">
</div>
<div id="sup-menu-6">
</div>
</div>
<div id="esq-menu">
<div id="esq-menu-1">
</div>
<div id="esq-menu-2">
</div>
<div id="esq-menu-3">
</div>
<div id="esq-menu-4">
</div>
<div id="esq-menu-5">
</div>
<div id="esq-menu-6">
</div>
</div>
<div id="cen-menu">
<h2>Menu Principal</h2>
<ul>
<li onclick="inicio()">Página inicial</li>
<li onclick="muda(1,'Cálculo')" title="Para ajudar você na faculdade ou no trabalho">Cálculo</li><li onclick="muda(2,'Comp. Gráfica')" title="Conheça mais sobre o mundo que criou Avatar e outros sucessos">Comp. Gráfica</li><li onclick="muda(3,'Games')" title="Tenha sua diversão garantida aqui!">Games</li><li onclick="muda(4,'Programação')" title="Aprenda mais sobre como criar grandes programas de computadores">Programação</li><li onclick="muda(5,'MarajoaraNet')" title="Conheça mais desse projeto 100% paraense!">MarajoaraNet</li><li onclick="requisicaoAjax('Usuario','login')">Login</li></ul>
</div>
<div id="dir-menu">
<div id="dir-menu-1">
</div>
<div id="dir-menu-2">
</div>
<div id="dir-menu-3">
</div>
<div id="dir-menu-4">
</div>
<div id="dir-menu-5">
</div>
<div id="dir-menu-6">
</div>
</div>
<div id="inf-menu">
<div id="inf-menu-6">
<div id="inf-menu-l1">
</div>
<div id="inf-menu-l2">
</div>
<div id="inf-menu-l3">
</div>
<div id="inf-menu-l4">
</div>
<div id="inf-menu-l5">
</div>
<div id="inf-menu-l6">
</div>
<div id="inf-menu-l7">
</div>
<div id="inf-menu-l8">
</div>
<div id="inf-menu-l9">
</div>
<div id="inf-menu-l10">
</div>
</div>
<div id="inf-menu-5">
</div>
<div id="inf-menu-4">
</div>
<div id="inf-menu-3">
</div>
<div id="inf-menu-2">
</div>
<div id="inf-menu-1">
</div>
</div>
</div>
<div id="corpo">
<div id="sup-corpo">
<div id="sup-corpo-1">
<div id="sup-corpo-l1">
</div>
<div id="sup-corpo-l2">
</div>
<div id="sup-corpo-l3">
</div>
<div id="sup-corpo-l4">
</div>
<div id="sup-corpo-l5">
</div>
<div id="sup-corpo-l6">
</div>
<div id="sup-corpo-l7">
</div>
<div id="sup-corpo-l8">
</div>
<div id="sup-corpo-l9">
</div>
<div id="sup-corpo-l10">
</div>
</div>
<div id="sup-corpo-2">
</div>
<div id="sup-corpo-3">
</div>
<div id="sup-corpo-4">
</div>
<div id="sup-corpo-5">
</div>
<div id="sup-corpo-6">
</div>
</div>
<div id="esq-corpo">
<div id="esq-corpo-1">
</div>
<div id="esq-corpo-2">
</div>
<div id="esq-corpo-3">
</div>
<div id="esq-corpo-4">
</div>
<div id="esq-corpo-5">
</div>
<div id="esq-corpo-6">
</div>
</div>
<div id="cen-corpo">
<script type="text/javascript" defer="defer" >
function vai(){
if(document.navigators.history.length == 0){
encaminhaAjax(document.getElementById("inicial"));
}
}
// if(!document.navigators.history){
if(!document.navigators.is_ie)window.addEventListener ("load", function(){
window.setTimeout("vai()",300);}, false);
else window.attachEvent("onload", function(){
window.setTimeout("vai()",300);});//}
</script>
<a id="inicial" href="?classe=Principal&acao=inicio"></a>
</div>
<div id="dir-corpo">
<div id="dir-corpo-1">
</div>
<div id="dir-corpo-2">
</div>
<div id="dir-corpo-3">
</div>
<div id="dir-corpo-4">
</div>
<div id="dir-corpo-5">
</div>
<div id="dir-corpo-6">
</div>
</div>
<div id="inf-corpo">
<div id="inf-corpo-6">
<div id="inf-corpo-l1">
</div>
<div id="inf-corpo-l2">
</div>
<div id="inf-corpo-l3">
</div>
<div id="inf-corpo-l4">
</div>
<div id="inf-corpo-l5">
</div>
<div id="inf-corpo-l6">
</div>
<div id="inf-corpo-l7">
</div>
<div id="inf-corpo-l8">
</div>
<div id="inf-corpo-l9">
</div>
<div id="inf-corpo-l10">
</div>
</div>
<div id="inf-corpo-5">
</div>
<div id="inf-corpo-4">
</div>
<div id="inf-corpo-3">
</div>
<div id="inf-corpo-2">
</div>
<div id="inf-corpo-1">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8854064-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Devia ficar como no meu site:
http://autoaprendizado.awardspace.info
Mas fica assim:
[URL=http://img233.imageshack.us/i/capturecy.png/]
[/URL]