Forums

# utiliser svg dans un xbl (débutant)

Envoyé par : Chris93

Date : 06/03/2007 15:11

Bonjour, Je tourne en rond depuis un moment.

J'ai un composant suivant:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
	xmlns:svg="http://www.w3.org/2000/svg" 
	xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	  
 <binding id="SimpleTest">
 <content> 
 <xul:vbox flex="1">
 
   <xul:vbox anonid="boxHaut" height="100px">
  <xul:hbox>
   <xul:label value="toto"/>
   <xul:label value="titi"/>
  </xul:hbox>
</xul:vbox>

<xul:splitter/>

<xul:vbox anonid="boxBas" flex="1"/>

 </xul:vbox>
 
 </binding>
 </content> 
</bindings>

Je voudrais utiliser svg pour appliquer un dégradé linéaire à "boxhaut".

Comment dois-je m'y prendre ? Je sais comment créer un dégradé seul dans un fichier svg mais je n'arrive pas à combiner les deux.

merci

# Re: utiliser svg dans un xbl (débutant)

Envoyé par : Paul Rouget

Date : 06/03/2007 17:50

Tu peux créer un ilot svg à l'intérieur de ton code XUL. Genre:

  <xul:label value="toto"/>
    <svg:svg>
      <svg:circle/>
    </svg:svg>
  <xul:label value="titi"/>

# Re: utiliser svg dans un xbl (débutant)

Envoyé par : Chris93

Date : 07/03/2007 11:22

Merci pour ta réponse. J'essaie mais ça ne donne pas grand chose. Mon code ressemble à ceci (code html adapté à zul):

<xul:vbox anonid="boxHaut" height="100px" style="position:absolute; z-index:0;">	 
  <xul:hbox>
   <xul:label value="toto"/>		
   <xul:label value="titi"/>
  </xul:hbox>
  
  <svg:svg style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
    <svg:linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <svg:stop offset="0%" stop-color="#FFF"/>
      <svg:stop offset="100%" stop-color="#D7D4CF"/>
    </svg:linearGradient>
  <svg:g>
     <svg:rect x="0" y="0" width="100%" height="100%" style="fill:url(#gradient)" />    
  </svg:g>	
  </svg:svg>
  
</xul:vbox>

autant pisser dans un violon. une idée ? merci

# Re: utiliser svg dans un xbl (débutant)

Envoyé par : Paul Rouget

Date : 07/03/2007 14:57

<binding extends="svg:generic">

# Re: utiliser svg dans un xbl (débutant)

Envoyé par : Chris93

Date : 07/03/2007 15:10

pas mieux...

# Re: utiliser svg dans un xbl (débutant)

Envoyé par : Paul Rouget

Date : 07/03/2007 18:19

Arf... je vois le soucis.

Il y a un bug dans l'implémentation SVG: Je crois bien que Gecko va chercher #gradient dans le document courant (le document qui héberge ton XBL) et qu'il ne prend pas en compte le contenu anonyme (celui de ton XBL).

J'avais eu ce soucis avec les symbols.

À valider, à l'époque j'utilisais un Gecko plus ancien.

# Re: utiliser svg dans un xbl (débutant)

Envoyé par : Chris93

Date : 13/03/2007 10:34

c'est peut-être l'explication. le code suivant fonctionne dans une fenêtre mais, transposé dans un xbl, n'affiche plus le dégradé.

j'ai essayé d'utiliser un svg comme image de fond mais firefox ne le considère pas comme une image.

merci pour tes explications

<window	
xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	
<vbox flex="1">	
<vbox anonid="boxHaut" height="100px" style="position:absolute; z-index:0;">
 
 <svg:svg width="100%" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position:absolute; z-index:-1;">
	<svg:defs>
		<svg:linearGradient id="pnlGradient" x1="0%" y1="0%" x2="0%" y2="100%" >
			<svg:stop offset="0%" stop-color="#FFF" />
			<svg:stop offset="100%" stop-color="#D7D4CF" />
		</svg:linearGradient>
	</svg:defs>
	<svg:rect x="0" y="0" width="100%" height="100%" style="fill:url(#pnlGradient)"/>
</svg:svg>

  <hbox>
   <label value="toto"/>		
   <label value="titi"/>
  </hbox>
  
</vbox>

<splitter/>	
<vbox anonid="boxBas" flex="1"/>		
 </vbox>


</window>

Forums : Xul, Xbl, JS...

# utiliser svg dans un xbl (débutant)

# Re: utiliser svg dans un xbl (débutant)

# Re: utiliser svg dans un xbl (débutant)

# Re: utiliser svg dans un xbl (débutant)

# Re: utiliser svg dans un xbl (débutant)

# Re: utiliser svg dans un xbl (débutant)

# Re: utiliser svg dans un xbl (débutant)