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 *
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
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 *
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
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 *
B1abla:
nevím jak se ta A4 dává pryč
Soubor → Vlastnosti dokumentu > Vlastní velikost

Vaše odpověď

Mohlo by se hodit

  • Pokud přikládáte obrázkové ukázky, dbejte prosím na jejich přijatelnou (datovou) velikost.
  • Uvádějte v titulku grafický program, na který se ptáte.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: