Você pode controlar como a largura do traçado de um SVG é desenhada?

Atualmente construindo um aplicativo SVG baseado em navegador. Dentro deste aplicativo, várias formas podem ser estilizadas e posicionadas pelo usuário, incluindo retângulos.

Quando aplico a stroke-widthem um rectelemento SVG , por exemplo 1px, o traçado é aplicado ao rectdeslocamento e inserção do de diferentes maneiras por diferentes navegadores. Isso está se mostrando problemático, especialmente quando tento calcular a largura externa e a posição visual de um retângulo e posicioná-lo ao lado de outros elementos.

Por exemplo:

• O Firefox adiciona 1 px inserido (inferior e esquerdo) e 1 px offset (superior e direito)
• O Chrome adiciona 1 px inserido (superior e esquerdo) e 1 px offset (inferior e direito)

Minha única solução até agora seria desenhar as bordas reais (provavelmente com a pathferramenta) e posicionar as bordas atrás do elemento traçado. Mas essa solução é uma solução desagradável e eu preferiria não seguir esse caminho, se possível.

Então, minha pergunta é: você pode controlar como um SVG stroke-widthé desenhado em elementos?

Não, você não pode especificar se o traçado é desenhado dentro ou fora de um elemento. Fiz uma proposta ao grupo de trabalho SVG para essa funcionalidade em 2003, mas ele não recebeu suporte (ou discussão).

Como observei na proposta,

• você pode obter o mesmo resultado visual que "dentro" dobrando a largura do traçado e, em seguida, usando um traçado de recorte para prender o objeto nele mesmo, e
• você pode obter o mesmo resultado visual de 'fora' dobrando a largura do traçado e, em seguida, sobrepondo uma cópia sem traço do objeto em cima dele.

Editar : Esta resposta pode estar errada no futuro. Deve ser possível alcançar esses resultados usando o SVG Vector Effects , combinando veStrokePathcom veIntersect(para 'dentro') ou com veExclude(para 'fora). No entanto, o Vector Effects ainda é um módulo de rascunho de trabalho sem implementações que ainda posso encontrar.

Edit 2 : A especificação de rascunho do SVG 2 inclui uma stroke-alignmentpropriedade (com o centro | dentro | fora dos valores possíveis). Essa propriedade poderá entrar em UAs eventualmente.

Editar 3 : Amusingly e dissapointingly, o grupo de trabalho SVG removeu stroke-alignmenta partir SVG 2. Você pode ver algumas das preocupações descritas após a prosa aqui .

ATUALIZAÇÃO: o stroke-alignmentatributo foi no dia 1º de abril de 2015 movido para uma especificação completamente nova chamada SVG Strokes .

A partir do rascunho do Editor do SVG 2.0 de 26 de fevereiro de 2015 (e possivelmente desde 13 de fevereiro ),a stroke-alignmentpropriedade está presentecom os valores inner, center (padrão) e outer.

Parece funcionar da mesma maneira que a stroke-locationpropriedade proposta por @Phrogz e a stroke-positionsugestão posterior . Esta propriedade foi planejada desde pelo menos 2011, mas além de uma anotação que dizia

O SVG 2 deve incluir uma maneira de especificar a posição do curso

, nunca foi detalhado nas especificações como foi adiado - até agora, parece.

Nenhum navegador suporta essa propriedade, ou, até onde eu sei, qualquer um dos novos recursos do SVG 2, ainda, mas espero que eles o façam logo que a especificação amadurecer. Esta tem sido uma propriedade que eu pessoalmente tenho pedido, e estou muito feliz por finalmente estar lá nas especificações.

Parece haver algumas questões sobre como a propriedade deve se comportar em caminhos abertos e em loops. Esses problemas provavelmente prolongarão as implementações nos navegadores. No entanto, atualizarei esta resposta com novas informações à medida que os navegadores começarem a oferecer suporte a essa propriedade.

Encontrei uma maneira fácil, que tem algumas restrições, mas funcionou para mim:

• definir a forma em defs
• definir um caminho de clipe referenciando a forma
• use-o e dobre o curso com o exterior cortado

Aqui está um exemplo de trabalho:

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

Você pode usar CSS para estilizar a ordem dos traços e preenchimentos. Ou seja, toque primeiro e depois preencha em segundo, e obtenha o efeito desejado.

MDN em paint-order: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order

Código CSS:

paint-order: stroke;

Aqui está uma função que calcula quantos pixels você precisa adicionar - usando o traçado especificado - nas partes superior, direita, inferior e esquerda, todos baseados no navegador:

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

        }

    };

Como as pessoas acima observaram, você terá que recalcular um deslocamento nas coordenadas do caminho do traçado ou dobrar sua largura e depois mascarar um lado ou outro, porque o SVG não apenas não suporta nativamente o alinhamento do traçado do Illustrator, mas o PostScript também não. .

A especificação para traçados no PostScript da Adobe, 2a edição, afirma: " 4.5.1 Traçado: o operador traçado desenha uma linha com alguma espessura ao longo do caminho atual. Para cada segmento reto ou curvo no caminho, traçado traça uma linha centralizada em o segmento com lados paralelos ao segmento ". (ênfase deles)

O restante da especificação não possui atributos para compensar a posição da linha. Quando o Illustrator permite o alinhamento interno ou externo, ele recalcula o deslocamento do caminho real (porque ainda é computacionalmente mais barato do que sobreimprimir e mascarar). As coordenadas do caminho no documento .ai são referência, não o que é rasterizado ou exportado para um formato final.

Como o formato nativo do Inkscape é SVG de especificação, ele não pode oferecer um recurso que a especificação não possui.

Aqui está uma solução alternativa para bordas internas rect usando symbole use.

Exemplo : https://jsbin.com/yopemiwame/edit?html,output

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>

Nota: Certifique-se de substituir o ?em usecom valores reais.

Antecedentes : A razão pela qual isto funciona é porque símbolo estabelece uma nova janela, substituindo symbolcom svge criando um elemento no DOM sombra. O svgDOM da sombra é então vinculado ao seu SVGelemento atual . Observe que svgs pode ser aninhado e cada svgum cria uma nova janela de exibição, que recorta tudo o que se sobrepõe, incluindo a borda sobreposta. Para uma visão muito mais detalhada do que está acontecendo, leia este fantástico artigo de Sara Soueidan.

Não sei como isso será útil, mas no meu caso, criei outro círculo apenas com borda e coloquei "dentro" da outra forma.

Uma solução possível (suja) é usar padrões,

Aqui está um exemplo com um triângulo com traços internos:

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>

A solução de Xavier Ho de dobrar a largura do traçado e alterar a ordem da tinta é brilhante, embora só funcione se o preenchimento for de uma cor sólida, sem transparência.

Eu desenvolvi outra abordagem, mais complicada, mas funciona para qualquer preenchimento. Também funciona em elipses ou caminhos (com o posterior há alguns casos de canto com comportamento estranho, por exemplo, caminhos abertos que se cruzam entre si, mas não muito).

O truque é exibir a forma em duas camadas. Um sem traço (preenchimento apenas) e outro apenas com traçado na largura dupla (preenchimento transparente) e passado por uma máscara que mostra toda a forma, mas oculta a forma original sem traçado.

  <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"/>
    <mask id="mask">
      <use xlink:href="#ld" stroke="#FFFFFF" stroke-width="160" fill="#FFFFFF"/>
      <use xlink:href="#ld" fill="#000000"/>
    </mask>
  </defs>
  <g>
    <use xlink:href="#ld" fill="#00D2B8"/>
    <use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="red" mask="url(#mask)"/>
  </g>
  </svg>