sintaxis - ¿Puedes controlar cómo se dibuja el ancho de trazo de un SVG?

svg path generator

Question

Actualmente construyendo una aplicación SVG basada en navegador. Dentro de esta aplicación, el usuario puede diseñar y posicionar varias formas, incluidos los rectángulos.

Cuando aplico un stroke-width a un elemento rect SVG de, por ejemplo, 1px , el trazo se aplica al desplazamiento del rect y se inserta de diferentes maneras en diferentes navegadores. Esto está resultando problemático, especialmente cuando intento calcular el ancho exterior y la posición visual de un rectángulo y colocarlo junto a otros elementos.

Por ejemplo:

• Firefox agrega un recuadro de 1px (abajo y a la izquierda) y un desplazamiento de 1px (arriba y a la derecha)
• Chrome agrega un recuadro de 1px (arriba y a la izquierda) y un desplazamiento de 1px (abajo y a la derecha)

Mi única solución hasta ahora sería dibujar las fronteras reales yo mismo (probablemente con la herramienta de path ) y colocar las fronteras detrás del elemento acariciado. Pero esta solución es una solución desagradable, y preferiría no seguir este camino si es posible.

Entonces mi pregunta es, ¿pueden controlar cómo se dibuja el stroke-width de stroke-width de SVG en los elementos?

Answer 1

Aquí hay una función que calculará la cantidad de píxeles que necesita agregar, utilizando el trazo dado, en la parte superior, derecha, inferior e izquierda, todo basado en el 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
            };

        }

    };

Answer 2

Aquí hay una solución para el borde interno confinado usando symbol y use .

Ejemplo : 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: asegúrese de reemplazar el ? en use con valores reales.

Antecedentes : la razón por la que esto funciona es porque el símbolo establece una nueva ventana gráfica reemplazando el symbol con svg y creando un elemento en el DOM sombreado. Esta svg del DOM sombreado se vincula a su elemento SVG actual. Tenga en cuenta que svg s se puede anidar y cada svg crea una nueva ventana gráfica, que recorta todo lo que se superpone, incluido el borde superpuesto. Para una descripción mucho más detallada de lo que sucede, lee este fantástico artículo de Sara Soueidan.

Answer 3

Como las personas anteriores han notado, tendrá que volver a calcular un desplazamiento a las coordenadas de ruta del trazo o doblar su ancho y luego enmascarar un lado u otro, porque SVG no es compatible nativamente con la alineación de trazos de Illustrator, pero PostScript tampoco .

La especificación de carreras del Manual de PostScript de Adobe, segunda edición, establece: " 4.5.1 Acarreo: el operador de trazo dibuja una línea de cierto grosor a lo largo de la ruta actual. Para cada segmento recto o curvo en la ruta, el trazo dibuja una línea centrada en el segmento con lados paralelos al segmento ". (énfasis de ellos)

El resto de la especificación no tiene atributos para compensar la posición de la línea. Cuando Illustrator le permite alinear dentro o fuera, está recalculando el desplazamiento del camino real (porque sigue siendo computacionalmente más barato que la sobreimpresión y el enmascaramiento). Las coordenadas de ruta en el documento .ai son referencias, no lo que se rasteriza o se exporta a un formato final.

Debido a que el formato nativo de Inkscape es SVG, no puede ofrecer una característica que carece de especificación.

Answer 4

Encontré una manera fácil, que tiene algunas restricciones, pero funcionó para mí:

• definir la forma en defs
• definir una ruta de recorte que haga referencia a la forma
• usarlo y duplicar el trazo con como se recorta el exterior

Aquí un ejemplo de trabajo:

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

Answer 5

No sé qué tan útil será, pero en mi caso, acabo de crear otro círculo con borde solamente y lo coloqué "dentro" de la otra forma.

Answer 6

No, no puede especificar si el trazo se dibuja dentro o fuera de un elemento. Hice una propuesta al grupo de trabajo SVG para esta funcionalidad en 2003, pero no recibió soporte (ni discusión).

Como señalé en la propuesta,

• puede lograr el mismo resultado visual que "adentro" al duplicar el ancho de su trazo y luego usar un trazado de recorte para recortar el objeto a sí mismo, y
• puede lograr el mismo resultado visual que ''afuera'' al duplicar el ancho de trazo y luego superponer una copia sin trazo del objeto sobre sí misma.

Editar : esta respuesta puede estar equivocada en el futuro. Debería ser posible lograr estos resultados usando SVG Vector Effects , combinando veStrokePath con veIntersect (para ''inside'') o con veExclude (para ''outside''). Sin embargo, Vector Effects sigue siendo un módulo de borrador en funcionamiento sin implementaciones que aún puedo encontrar.

Edición 2 : La especificación borrador SVG 2 incluye una propiedad de stroke-alignment (con centro | interior | fuera de los valores posibles). Esta propiedad puede convertirse en UAs eventualmente.

Edición 3 : De manera divertida y decepcionante, el grupo de trabajo de SVG ha eliminado stroke-alignment de stroke-alignment de SVG 2. here puede ver algunas de las inquietudes que se describen después de la prosa.

Answer 7

Una posible solución (sucia) es mediante el uso de patrones,

aquí hay un ejemplo con un triángulo interior frotado:

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>

Answer 8

ACTUALIZACIÓN: el atributo de stroke-alignment here .

A partir del Borrador del Editor SVG 2.0 del 26 de febrero de 2015 (y posiblemente desde el 13 de febrero ), stroke-alignment con los valores inner , center (predeterminado) y outer .

Parece funcionar de la misma manera que la propiedad de stroke-location propuesta por @Phrogz y la sugerencia de stroke-position posterior. Esta propiedad ha sido planificada desde al menos 2011, pero aparte de una anotación que decía

SVG 2 incluirá una forma de especificar la posición de la carrera

, nunca se ha detallado en la especificación como se difirió , hasta ahora, parece.

Ningún navegador admite esta propiedad, o, hasta donde yo sé, ninguna de las nuevas características de SVG 2, pero espero que pronto lo haga a medida que la especificación madure. Esta ha sido una propiedad que personalmente he estado urgiendo a tener, y estoy muy feliz de que finalmente esté ahí en las especificaciones.

Parece haber algunos problemas en cuanto a cómo debe comportarse la propiedad en las rutas abiertas, así como en los bucles. Estos problemas probablemente prolongarán las implementaciones en los navegadores. Sin embargo, actualizaré esta respuesta con nueva información a medida que los navegadores comiencen a admitir esta propiedad.