Comunidad de diseño web y desarrollo en internet

Cómo posicionar svg

Citar            
MensajeEscrito el 22 Jun 2017 08:02 pm
Hola! Soy novato y estoy haciendo una web con html/css. ¿Cómo podría hacer esto?
[img]http://imgur.com/a/Vds4H[/img]

<nav>
<svg id="circle" height="40px" width="40">
<circle cx="20" cy="20" r="20"/></svg>
<svg id="cross" width="40px" height="40px" viewBox="136 162 279 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M290,287 L290,176.509944 C290,168.485845 283.508129,162 275.5,162 C267.49011,162 261,168.496323 261,176.509944 L261,287 L150.509944,287 C142.485845,287 136,293.491871 136,301.5 C136,309.50989 142.496323,316 150.509944,316 L261,316 L261,426.490056 C261,434.514155 267.491871,441 275.5,441 C283.50989,441 290,434.503677 290,426.490056 L290,316 L400.490056,316 C408.514155,316 415,309.508129 415,301.5 C415,293.49011 408.503677,287 400.490056,287 L290,287 Z" id="Combined-Shape" stroke="none" fill-rule="evenodd"></path>
</svg>
</nav>

CSS:

#circle {
display: inline-block;
margin-top: 0px;
fill:#5900FF;
margin-right: 8px;
float: right;
z-index: 0;
position: relative;
}

#cross {
stroke: none;
fill: black;
margin-top: 5px;
float: right;
z-index: 1;
position: relative;
}

No consigo posicionar lac cruz sobre el circulo

[img]http://imgur.com/a/E2UFW[/img]

Por Nao

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 12 Ago 2017 02:16 am
http://www.poloralphlauren-shirts.us.com http://www.oakleysunglasseswholesaleonline.us.com http://www.uggoutlet.name http://www.adidasoutlet.us.org http://www.cheapuggs.eu.com http://www.coachoutletcoachoutletstore.us.com http://www.coachoutletonlineoutlet.us.com http://www.ralphlaurenoutletonlinestore.us.com http://www.oakleysunglasseswholesales.us.com http://www.canadagoosejacketsoutlet.com.co http://www.coachfactory-outlet.eu.com http://www.coachoutletonlinestoreofficial.us.com http://www.nikeoutlet.com.co http://www.michaelkorsoutletonlinestore.us.org http://www.cheapuggboots.name http://www.ralphlaurenpolouk.me.uk http://www.oakleysunglassesshopping.us.com http://www.moncleroutlets.us.com http://www.coachfactoryoutletmiami.us.com http://www.oakleysunglasseswholesaleok.us.com http://www.ugg-outletonline.us.org http://www.coachfactoryoutlet-coachoutlet.us.com http://www.pandoraoutlets.us.com http://www.ralph-laurenpolooutlet.us.com http://www.coach-outletonlines.eu.com http://www.cheapjordans-forsale.us.com http://www.michaelkorsoutletonlineshops.us.com http://www.uggbootsblackfridaysale.in.net http://www.ugg-outletonline.com.co http://www.uggsboots-australia.in.net http://www.michaelkors-outletofficial.us.com http://www.uggbootsblackfriday.in.net http://www.polooutlet.us.org http://www.coachfactoryoutleta.us.com http://www.longchampoutlet.us.org http://www.cheap-uggboots.us.org http://www.mlbjerseys.net http://www.michaelkors-handbags.in.net http://www.adidasshoes.us.org http://www.uggboots-clearance.com.co http://www.michaelkorsoutletclearancehandbags.us.com http://www.mont-blancpens.us.com http://www.canadagooseoutlet-store.com.co http://www.christianlouboutinoutlet-store.us.com 20170812WANGLILI

Por wanglili

13 de clabLevel



 

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.