Mise à l'échelle d'un motif de remplissage dans Raphael.js

StackOverflow https://stackoverflow.com/questions/1098994

Question 

paper=Raphael('previewBody',480,480);
paper.path({"stroke-width":1},'M0,0 L480,240 L480,480 L240,480 z')
  .attr('fill','url(bg.png)'))
  .scale(.5,.5,0,0);

Mon problème est le remplissage n'est pas mis à l'échelle avec la toile svg, donc proportionnellement, il finit par deux fois la taille qu'il était avant l'échelle du chemin. Est-il un moyen facile d'escalader le motif de remplissage ainsi que le reste du svg?

Était-ce utile?

La solution

Il est note possible de le faire en utilisant uniquement les fonctions de la bibliothèque raphael.

Lorsque vous appliquez la fonction d'échelle sur l'objet d'un raphael, il crée un nouveau nœud svg, avec les coordonnées mises à l'échelle, mais malheureusement, il ne modifie pas les propriétés de remplissage

Quoi qu'il en soit, lorsque vous ajoutez l'attribut « fill » avec une URL, la bibliothèque créer un motif. Si c'est le premier « remplir » attribut que vous utilisez, ce modèle est appelé raphael-pattern-0 la suivante est appelée raphael-pattern-1, etc ...)

Sachant cela, il est alors possible de changer l'attribut du motif, en fonction de la

Autres conseils

Je ne sais pas pourquoi, mais ma version de la bibliothèque Raphael (j'utilise la plus récente) ne met pas ID comme décrit @ThibThib. Il est probablement parce que nous avons maintenant 2013:)

Je vais aussi poster ma solution: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Raphael Test</title>

        <script type="text/javascript" src="js/libs/jquery.js"></script>
        <script type="text/javascript" src="js/libs/raphael.js"></script>
    </head>
    <body>
        <div id="raphael"></div>
        <script type="text/javascript">
            $(document).ready(function() {

                var raphael, path, pattern;

                raphael = Raphael(document.getElementById('raphael'), 500, 500);

                path = raphael.circle(200, 200, 180);
                path.attr('stroke', '#000000');
                path.attr('stroke-width', 3);
                path.attr('stroke-opacity', 1);
                path.attr('fill', 'url(http://3.bp.blogspot.com/_M4WdA9j-b-g/TLMF9JJJwcI/AAAAAAAAAV4/p0Y_Wo3S3sQ/s1600/Landscape1.jpg)');
                pattern = $(path.node).attr('fill');
                if(pattern) {
                    pattern = pattern.replace('url(', '').replace(')', '');
                    pattern = $(pattern);
                }

                // Shape element documentation: http://msdn.microsoft.com/en-us/library/hh846327(v=vs.85).aspx#shape_element
                // Fill element documentation: http://msdn.microsoft.com/en-us/library/bb229596(v=vs.85).aspx

                setTimeout(function() {
                    if(Raphael.vml) { // SVG not supported (IE7 & IE8) and it doesn't work :/

                        var html = $(path.node).html();
                        html = html.replace(/rvml:/g, ''); // remove prefix
                        html = html.replace(/ = /g, '=');
                        html = html.substr(html.indexOf('/>') + 2); // remove xml element

                        var src = '';
                        $(html).each(function() {
                            if($(this).prop("tagName") == 'FILL') {
                                src = $(this).attr('src');
                            }
                        });

                        if(src != '') {
                            var html = $(path.node).html();
                            html = html.replace(src, src + '" size="50,50');
                            $(path.node).html(html);
                            path.attr('stroke', '#000000');
                            path.attr('stroke-width', 3);
                            path.attr('stroke-opacity', 1);
                        }
                    }
                    else { // SVG supported and it prints correct URL
                        $(pattern)[0].setAttribute('width', 50);
                        $(pattern)[0].setAttribute('height', 50);
                        $(pattern).find('image')[0].setAttribute('width', 50);
                        $(pattern).find('image')[0].setAttribute('height', 50);
                        $(pattern).find('image')[0].setAttribute('preserveAspectRatio', 'defer none meet');
                    }
                }, 1000);
            });
        </script>
    </body>
</html>

Notez que quelques petites choses:

Vous pouvez bien sûr jouer avec des réglages différents ainsi:

VML Remplir la documentation de l'élément

SVG modèles

élément d'image SVG

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top