Vous pouvez contrôler la façon dont une SVG de la largeur du trait est dessiné?

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é en 2003, 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 comme "à 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.

Modifier: Cette réponse trompe peut-être dans l'avenir. Il devrait être possible d'atteindre ces résultats à l'aide 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.

Edit 2: Le SVG 2 projet de spécification comprend un course-alignement propriété (avec le centre|à l'intérieur|à l'extérieur de valeurs possibles). Cette propriété peut faire de la Samu finalement.

Modifier 3: de manière Amusante et dissapointingly, le groupe de travail SVG a supprimé stroke-alignment de SVG 2. Vous pouvez voir quelques-unes des préoccupations décrites après la prose ici.

J'ai trouvé un moyen simple, qui a un peu de restrictions, mais il a travaillé pour moi:

• définir la forme dans defs
• définir un clip de référencement la forme
• l'utiliser et le double de la course avec l'extérieur est coupé

Ici un exemple de travail:

HTML:

<svg width="240" height="240" viewBox="0 0 1024 1024">
<defs>
	<path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
	<clipPath id="clip">
		<use xlink:href="#ld"/>
	</clipPath>
</defs>
<g>
	<use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="#00D2B8" clip-path="url(#clip)"/>
</g>
</svg>

Voici une fonction qui calculera le nombre de pixels que vous devez ajouter - en utilisant le avc - en haut, à droite, en bas et à gauche, tous basés sur le 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
            };

        }

    };

Ici est un travail autour de intérieure bordée rect à l'aide de symbol et use.

Exemple: https://jsbin.com/yopemiwame/edit?html,sortie

SVG:

<svg>
  <symbol id="inner-border-rect">
    <rect class="inner-border" width="100%" height="100%" style="fill:rgb(0,255,255);stroke-width:10;stroke:rgb(0,0,0)">
  </symbol>
  ...
  <use xlink:href="#inner-border-rect" x="?" y="?" width="?" height="?">
</svg>

Remarque: assurez-vous de remplacer le ? dans use avec de vraies valeurs.

Fond: La raison pour laquelle cela fonctionne est que symbole établit une nouvelle fenêtre d'affichage en remplaçant symbol avec svg et la création d'un élément dans l'ombre DOM. Cette svg de l'ombre DOM est alors lié à votre SVG élément. Notez que svgs peuvent être imbriquées et tous les svg crée une nouvelle fenêtre d'affichage, les clips tout ce qui chevauche, y compris le chevauchement de la frontière. Pour une présentation plus détaillée de ce qui se passe lire ce fantastique article par Sara Soueidan.

Un (sale) solution possible est par l'utilisation de modèles,

voici un exemple avec un intérieur caressa triangle :

https://jsfiddle.net/qr3p7php/5/

<style>
#triangle1{
  fill: #0F0;
  fill-opacity: 0.3;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 20;
}
#triangle2{
  stroke: #f00;
  stroke-opacity: 1;
  stroke-width: 1;
}    
</style>

<svg height="210" width="400" >
    <pattern id="fagl" patternUnits="objectBoundingBox" width="2" height="1" x="-50%">
        <path id="triangle1" d="M150 0 L75 200 L225 200 Z">
    </pattern>    
    <path id="triangle2" d="M150 0 L75 200 L225 200 Z" fill="url(#fagl)"/>
</svg>