Div de forme personalisée

Version imprimable

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:

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 :)

11/12/2012, 12h24
Kaamo

Étrange : Si on s'amuse à redimensionner la zone de résultat, cela déclenche l'affichage souhaité
12/12/2012, 19h19
marcbuils

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.

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

Code:

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);

12/12/2012, 22h35
marcbuils

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 :ccool:

Merci pour votre aide !