28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai inclus un svg sur mon site grâce à la balise object.
Je souhaite le mettre à l'échelle horizontalement pour qu'il prenne toute la largeur de la page.
Je ne sais pas si c'est possible.



--
http://www.ibiiztera.be
Modifié par manud (26 Aug 2010 - 03:11)
En fait, je souhaite aussi pouvoir mettre un svg en arrière-plan et qu'il prenne toute la taille du bloc dans lequel il est inclus (mise à l'échelle). Apparemment la balise object ne permet pas ça. Est-ce possible?? Smiley cligne
Salut manud

Je l'ai exécuter en local et voici les résultats. L'attribut fullscreen=yes n'est pas obligatoire ici.


<body>
<embed width=100% height=100% fullscreen=yes src="www.iBiiz.com.svg"></embed>
</body>


upload/20350-svg01.jpg

Essais « embed » plutôt que « object ». C'est d'ailleurs embed qu'il faut utiliser.
Oubli pas que j'ai tester en local, ajuste ton url pour la cible svg.

Il est actif lorsque l'on change le pourcentage de width et height « w 50% et h 50% » en exemple. Mais il agit comme un masque. Il te faut le script SVG pour le modifier et en local.

Je ne sais pas pourquoi mais j'hésite de te laisser la source SVG mais enfin pourquoi pas.
Il est sous Creative Commons après tout. Mais c'est surtout qu'on est pas sur le bon topic.


<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="728"
   height="180"
   id="svg2816"
   version="1.1"
   inkscape:version="0.47 r22583"
   sodipodi:docname="www.iBiiz.com.svg"
   inkscape:export-filename="C:\Prog\web sites\www.ibiiz.com\www.iBiiz.com.png"
   inkscape:export-xdpi="90"
   inkscape:export-ydpi="90">
  <defs
     id="defs2818">
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="0 : 45 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_z="728 : 45 : 1"
       inkscape:persp3d-origin="364 : 30 : 1"
       id="perspective2824" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.75"
     inkscape:cx="192.64125"
     inkscape:cy="45"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="706"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata2821">
    <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:groupmode="layer"
     id="layer2"
     inkscape:label="barres"
     style="display:inline"
     sodipodi:insensitive="true">
    <rect
       style="fill:#666666"
       id="rect2853"
       width="729.33331"
       height="60"
       x="0"
       y="120" />
    <rect
       style="fill:#4d4d4d"
       id="rect2855"
       width="732"
       height="24"
       x="0"
       y="58.666668" />
    <rect
       style="fill:#333333"
       id="rect2857"
       width="732"
       height="10.666667"
       x="1.3333334"
       y="18.666666" />
    <rect
       style="fill:#1a1a1a"
       id="rect2859"
       width="732"
       height="4"
       x="-1.3333334"
       y="1.3333334" />
  </g>
  <g
     id="layer1"
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     transform="translate(0,90)"
     style="display:inline">
    <text
       xml:space="preserve"
       style="font-size:64.06835175000000500px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Engravers MT;-inkscape-font-specification:Engravers MT"
       x="11.074332"
       y="37.76334"
       id="text2826"
       transform="scale(0.86192807,1.1601896)"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan2840"
         x="11.074332"
         y="37.76334">www.</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:152.55796814px;font-style:normal;font-weight:normal;fill:#ffff00;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
       x="221.92761"
       y="47.219822"
       id="text2830"
       transform="scale(1.0571602,0.94593044)"><tspan
         sodipodi:role="line"
         id="tspan2832"
         x="221.92761"
         y="47.219822">iBiiz</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:82.92436218px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ff0000;fill-opacity:1;stroke:none;font-family:Eras Demi ITC;-inkscape-font-specification:Eras Demi ITC"
       x="584.39514"
       y="40.42062"
       id="text2834"
       sodipodi:linespacing="125%"
       transform="scale(0.93213718,1.0728035)"><tspan
         sodipodi:role="line"
         id="tspan2838"
         x="584.39514"
         y="40.42062">.be</tspan></text>
  </g>
</svg>


Si tu préfère l'arborescence XML tu và ici

Dernier point : remarque les « font-family » en CSS. Tous n'auront pas les résultats prévus.
D'ailleurs dans le script SVG il y a du 3D dans <inkscape:perpective /> Le 3D n'est pas effectif, ni sur ton site, ni dans mes tests.

Tu prend des risques car tous n'auront pas SVGViewer 3.0 de Adobe.

++
Modifié par zardoz (26 Aug 2010 - 06:46)