Pouvez-vous contrôler la façon dont la largeur de trait d'un SVG est dessinée?

Question

Actuellement à la construction d'un navigateur basé sur le format SVG application. Au sein de cette application, différentes formes peuvent être de style et positionnés par l'utilisateur, y compris des rectangles.

Lorsque j'applique un stroke-width d'un SVG rect élément de dire 1px, le coup est appliqué à l' rects'décalage et l'encart de différentes manières par les différents navigateurs. Cela se révèle être gênant, surtout quand j'ai essayer de calculer la largeur externe et visuelle de la position d'un rectangle et placez-la à côté d'autres éléments.

Par exemple:

• Firefox ajoute 1px inset (en bas et à gauche), et de 1px de décalage (en haut et à droite)
• Chrome ajoute 1px inset (en haut et à gauche), et de 1px de décalage (en bas et à droite)

Ma seule solution jusqu'à présent dessiner les frontières réelles moi-même (probablement avec l' path outil) et la position des frontières et de la caresse de l'élément. Mais cette solution est une mauvaise solution, et je préfère ne pas aller dans cette voie, si possible.

Donc ma question est, pouvez-vous contrôler la façon dont une SVG de l' stroke-width est attirée sur les éléments?

Answer 1

Non, vous ne pouvez pas spécifier si le trait est dessiné à l'intérieur ou à l'extérieur d'un élément. J'ai fait une proposition pour le groupe de travail SVG pour cette fonctionnalité il y a 8 ans, mais elle n'a pas reçu de soutien (ou de discussion).

Comme je l'ai indiqué dans la proposition,

• vous pouvez obtenir le même résultat visuel "à l'intérieur", en doublant votre largeur de tracé, puis à l'aide d'un tracé de détourage pour le clip de l'objet pour lui-même, et
• vous pouvez obtenir le même résultat visuel comme 'à l'extérieur' en doublant la largeur du contour, puis en superposition d'un pas de course de la copie de l'objet au-dessus de lui-même.

Edit: la réponse trompe peut-être dans l'avenir. Il devrait être possible d'atteindre ces résultats en utilisant SVG Vecteur des Effets, en combinant veStrokePath avec veIntersect (pour "à l'intérieur") ou avec veExclude (pour l'extérieur). Cependant, les Effets de Vecteurs sont encore un projet de module sans implémentations que je peux encore trouver.

Answer 2

Voici une fonction qui calculera le nombre de pixels que vous devez ajouter - en utilisant le trait donné - en haut, à droite, en bas et à gauche, tous en fonction du navigateur:

 var getStrokeOffsets = function(stroke){

        var strokeFloor =       Math.floor(stroke / 2),                                                                 // max offset
            strokeCeil =        Math.ceil(stroke / 2);                                                                  // min offset

        if($.browser.mozilla){                                                                                          // Mozilla offsets

            return {
                bottom:     strokeFloor,
                left:       strokeFloor,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }else if($.browser.webkit){                                                                                     // WebKit offsets

            return {
                bottom:     strokeCeil,
                left:       strokeFloor,
                top:        strokeFloor,
                right:      strokeCeil
            };

        }else{                                                                                                          // default offsets

            return {
                bottom:     strokeCeil,
                left:       strokeCeil,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }

    };