| Autor | Zpráva | ||
|---|---|---|---|
| B1abla Profil |
Ahoj, mám problém s SVG, v Inkscape jsem si vytvořil (podle návodu) čudlík (button), který jsem se poté snažil hodit na pozadí <div> jemu určenému. A ať zkouším v css vše co jsem našel na internetu tak mi to pořád nejde přizpůsobit do velikosti jaké chci, více méně mám tři výsledky:
1. Obrázek je buť zdeformovaný 2. Velmi malý 3. Není vůbec načtený prosím o zhlédnutí přiloženého kódu, případné opravy Soubor index.php <!doctype html>
<html lang="cs">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styly/styly.css">
</head>
<body>
<div class="okno">
<header class="hlavicka">
</header> <!-- .hlavicka -->
<div class="stranka">
<div class="levy_sloupec">
<div class="menu first">
Tady bude čudl
</div> <!-- menu first -->
<div class="menu second">
Tady bude čudl
</div> <!-- menu second -->
<div class="menu third">
Tady bude čudl
</div> <!-- menu third -->
<div class="menu fourth">
Tady bude čudl
</div> <!-- menu fourth -->
<div class="menu fifth">
Tady bude čudl
</div> <!-- menu fifth -->
</div> <!-- .levy_sloupec -->
<div class="telo_stranky">
</div> <!-- .telo_stranky -->
<div class="pravy_sloupec">
</div> <!-- .pravy_sloupec -->
</div> <!-- .stranka -->
<footer class="paticka">
</footer> <!-- .paticka -->
</div> <!-- .okno -->
</body>
</html>Soubor styly.css @charset "utf-8";
body {background-color: #005100;}
/* definice .okna */
.okno {
font-family: Verdana, Geneva, sans-serif;
top: 0px;
left: 0px;
}
/* definice .hlavicka */
.hlavicka {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 200px;
background-color: transparent;
border: 1px solid black;
}
/* definice .stranka */
.stranka {
position: relative;
margin-left: auto;
margin-right: auto;
top: 192px;
width: 904px;
height: 500px;
background-color: transparent;
}
/* definice .levy_sloupec */
.levy_sloupec {
position: relative;
float: left;
width: 200px;
height: 500px;
background-color: transparent;
}
/* definice menu (čudlů) */
.menu {
position: relative;
float: left;
margin: 5px 9px 0px 9px;
width: 180px;
height: 70px;
border: 1px solid black;
background-image: url('cudl.svg');
-moz-background-size: 180px, 70px;
-webkit-background-size: 180px, 70px;
-o-background-size: 180px, 70px;
-ms-background-size: 180px, 70px;
background-size: 180px, 70px;
}
/* definice .telo_stranky */
.telo_stranky {
position: relative;
float: left;
width: 600px;
height: 500px;
background-color: transparent;
}
/* definice .pravy_sloupec */
.pravy_sloupec {
position: relative;
float: left;
width: 100px;
height: 500px;
background-color: transparent;
border: 1px solid black;
}
/* definice .paticka */
.paticka {
position: absolute;
top: 700px;
left: 0px;
width: 100%;
height: 100px;
background-color: black;
}a pokud je to důležité tak i soubor cudl.svg (Inskcape) <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="744.09448819"
height="1052.3622047"
id="svg2"
inkscape:label="Pozadí"
version="1.1"
inkscape:version="0.48.2 r9819"
sodipodi:docname="cudl">
<defs
id="defs3">
<linearGradient
inkscape:collect="always"
id="linearGradient3931">
<stop
style="stop-color:#005100;stop-opacity:1;"
offset="0"
id="stop3933" />
<stop
style="stop-color:#000000;stop-opacity:1"
offset="1"
id="stop3935" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient3923">
<stop
style="stop-color:#005100;stop-opacity:1;"
offset="0"
id="stop3925" />
<stop
style="stop-color:#000000;stop-opacity:1"
offset="1"
id="stop3927" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3923"
id="linearGradient3929"
x1="136.37059"
y1="235.14877"
x2="135.86552"
y2="330.10312"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3931"
id="linearGradient3937"
x1="151.01781"
y1="276.56503"
x2="151.01781"
y2="192.72237"
gradientUnits="userSpaceOnUse" />
<filter
inkscape:collect="always"
id="filter3943">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="1.2139231"
id="feGaussianBlur3945" />
</filter>
<filter
inkscape:collect="always"
id="filter3947">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="1.0315345"
id="feGaussianBlur3949" />
</filter>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4142136"
inkscape:cx="125.71429"
inkscape:cy="768.77448"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="838"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata6">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Vrstva 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#005100;fill-opacity:1;stroke:none"
id="rect3790"
width="180"
height="70"
x="127.14286"
y="228.07646"
ry="14.647212" />
<rect
ry="14.224471"
y="229.08661"
x="129.7404"
height="67.979698"
width="174.80493"
id="rect3803"
style="fill:url(#linearGradient3929);fill-opacity:1;stroke:none;filter:url(#filter3943)" />
<path
style="fill:url(#linearGradient3937);fill-opacity:1;stroke:none;filter:url(#filter3947)"
d="M 154.96875 234.1875 C 148.2724 234.1875 142.875 239.5849 142.875 246.28125 L 142.875 279.875 C 142.875 286.57135 148.2724 291.96875 154.96875 291.96875 L 279.3125 291.96875 C 286.00885 291.96875 291.40625 286.57135 291.40625 279.875 L 291.40625 246.28125 C 291.40625 239.5849 286.00885 234.1875 279.3125 234.1875 L 154.96875 234.1875 z M 167.40625 239.96875 L 266.875 239.96875 C 272.23122 239.96875 276.5625 244.30003 276.5625 249.65625 L 276.5625 276.5 C 276.5625 281.85622 272.23122 286.1875 266.875 286.1875 L 167.40625 286.1875 C 162.05003 286.1875 157.75 281.85622 157.75 276.5 L 157.75 249.65625 C 157.75 244.30003 162.05003 239.96875 167.40625 239.96875 z "
id="rect3816" />
</g>
</svg>nezlob te se pokud se špatně ptám nebo je to prkotina, na fóru jsem to nenašel, děkuji předem všem |
||
| margin Profil * |
#2 · Zasláno: 4. 9. 2012, 18:00:56
Co ti brání vytvořit di čudlík o potřebné velikosti přímo v Inkscape?
Pořád je dost prohlížečů, které SVG neumí, lepší by bylo vyexportovat tlačítko z Inkscape ve formátu PNG. |
||
| B1abla Profil |
#3 · Zasláno: 4. 9. 2012, 18:08:54
ono to mělo mít požadovanou velikost, jen se to asi nějak nepovedlo, ale to co říkáš mě nenapadlo, jdu to zkusit. Stejně by mě zajímalo čím to je
jinač dík za tip |
||
| margin Profil * |
#4 · Zasláno: 4. 9. 2012, 18:51:41
B1abla:
„ono to mělo mít požadovanou velikost, jen se to asi nějak nepovedlo“ Tak jsi to dělal špatně, začíná se tím, že si nastavíš v pixelech velikost kreslící plochy a na ni nakreslíš tlačítko. Ty jsi velikost stránky neupravil, takže možná máš tlačítko o potřebné velikosti, ale pohozené na stránce formátu A4. |
||
| B1abla Profil |
#5 · Zasláno: 4. 9. 2012, 19:04:36
ano, to máš pravdu, nevím jak se ta A4 dává pryč, ale to tady nepatří. Jinač už jsem to udělal tak jak si mi radil a má to stejný výsledek, tak že ti moc děkuji za nakopnutí
|
||
| margin Profil * |
#6 · Zasláno: 4. 9. 2012, 20:15:37
B1abla:
„nevím jak se ta A4 dává pryč“ Soubor → Vlastnosti dokumentu > Vlastní velikost |
||
|
Časová prodleva: 12 let
|
|||
0