Div de forme personalisée

**marcbuils** · 10/12/2012, 19h25

Bonjour,

Je souhaite créer un div avec une forme personnalisée afin d'afficher du texte dynamique et des animations CSS3 à l’intérieur.
J'ai essayé d'ajouté un élément svg dans ma page HTML5 contenant un élément foreignobject de la forme personnalisée qui contient du code HTML.

Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="jquery.min.js"></script>
</head>
<body>
<h1>Test</h1>
                <svg viewbox="0 0 1920 268" data-message>
                    <defs>
                        <filter id="horizontal_12_messagebloc_filter" width="150%" height="150%">
                            <feOffset result="offOut" in="SourceAlpha" dx="-1.4" dy="-1.4"/>
                            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3.54"/>
                            <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
                        </filter>
                          <path id="horizontal_12_messagebloc_path" fill="#FFFFFF" d="M 30 35 L 30 40 L 30 128 C 30 130.77 32.23 133 35 133 L 80 133 C 82.77 133 85 135.23 85 138 L 85 268 L 1920 268 L 1920 35 L 85 35 L 35 35 L 30 35 z " />
                    </defs>
 
                    <clippath id="horizontal_12_messagebloc_clippath">
                        <use xlink:href="#horizontal_12_messagebloc_path" />
                    </clippath>
 
                      <g filter="url(#horizontal_12_messagebloc_filter)">
                          <g clip-path="url(#horizontal_12_messagebloc_clippath)">
                              <use xlink:href="#horizontal_12_messagebloc_path" />
                              <foreignobject width="1920" height="268" x="0" y="0">
                                  <body>
                                      <section data-container>
                                      </section>
                                  </body>
                              </foreignobject>
                          </g>
                      </g>
                </svg>
                <script>
                setInterval(function(){
                    $('[data-container]').append('<p>Un test de texte ajoute dans mon svg');
                }, 1000);
                </script>
</body>
</html>

Ce système fonctionne très bien sous Firefox mais pas sur Chrome (la partie HTML contenue dans l'élément foreignobject n'est pas rafraîchie).

Voici un exemple en ligne:
http://jsfiddle.net/YkCMr/

Avez vous une idée du problème ?
Comment puis-je avoir un comportement équivalent sachant que ma page doit fonctionner sur Firefox 15+ et Chrome (sans contraintes sur la version) ?

Merci pour votre aide

**Kaamo** · 11/12/2012, 12h24

Étrange : Si on s'amuse à redimensionner la zone de résultat, cela déclenche l'affichage souhaité

**marcbuils** · 12/12/2012, 19h19

Kaamo: Merci d'avoir regardé mon problème.
D'après ce que j'ai pu voir, il y a de nombreux rapport de bugs sur Chromium au sujet du SVG, mais ils ne sont pour l'instant pas prioritaires. Je me suis donc tourné vers un Patch pour chome qui utilise le paramètre css '-webkit-mask-box-image', tout en gardant la solution ci-dessus pour Firefox.

**NoSmoking** · 12/12/2012, 22h21

Bonsoir,
il est vrai qu'il semble falloir forcer le redraw

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
setInterval(function(){
    $('[data-container]').append('<p>Un test de texte ajoute dans mon svg'); 
    var obj =  $('#get');
    var larg = obj.attr('height');
    obj.attr('height', 1*larg+1);
    obj.attr('height', 1*larg);
  }, 1000);

**marcbuils** · 12/12/2012, 22h35

C'est vrai que je n'avais pas pensé à ça pour le redraw, merci NoSmoking

Dans mon cas ce ne sera pas suffisant car j'utilise en plus des animations CSS3 à l’intérieur du bloc ; Avec un refresh sur un timer, ça risque d'être moins beau...

Mais je note l'idée, ça peut toujours servir

Merci pour votre aide !

Div de forme personalisée [HTML 5]

HTML

Discussions similaires

Partager

Partager