sirven - ¿Por qué SVG stroke-width: 1 hace que las líneas sean transparentes?

stroke-width svg

Question

Estoy creando gráficos de stock con svg y estoy teniendo un problema cuando establezco el ancho de trazo de mis elementos de ruta en 1. En lugar de hacer que las líneas sean más angostas, simplemente lo hace del mismo tamaño que el ancho de trazo: 2 pero ligeramente transparente. No puedo publicar una imagen porque no tengo suficientes puntos de reputación ...

Mi etiqueta svg se ve así:

<div style="height:300px; width:400px; overflow:hidden">
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>

Y estoy agregando elementos de ruta dinámicamente usando javascript / jquery:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
$(shape).attr({"d":"...",
               "fill":"none",
               "stroke":color,
               "stroke-width":"1"});
$("svg").append(shape);

Dejé fuera el valor para el atributo d la ruta porque era algo largo. Además, el color es una variable de cadena que se determina antes de la mano como "verde", "rojo" o "negro".

¿Hay algo mal en mi código que está causando esto o es un problema diferente?

Answer 1

Esto probablemente se deba al anti-aliasing aplicado en la mayoría de las implementaciones de SVG. Cuando el ancho de línea se acerca o está por debajo de 1, el antialiasing lo hace de forma que los píxeles medio cubiertos se vuelvan parcialmente opacos. Con las transformaciones predeterminadas y la ventana gráfica en su lugar, su línea de un píxel probablemente se encuentra exactamente en el límite entre dos píxeles físicos, por lo que están medio cubiertos, lo que genera una transparencia general del 50%. Con una línea negra sobre un fondo blanco, esto produce un 50% de gris.

Answer 2

La respuesta de user616586 parece estar bien.

El problema que veo es que las líneas no tienen la misma distancia desde el centro de la forma porque una de ellas está compensada por 1 px. En la mayoría de las situaciones eso es probablemente aceptable, pero a veces no lo es.

Otra opción:

• use un ancho de trazo de 2px (tiene 1px renderizado afuera y 1px renderizado dentro de la forma)
• aplicar la forma a sí mismo como un clip-path (elimina la representación del 1px externo)

Answer 3

Si es D3js, intente agregar el atributo de estilo a continuación a su elemento d3:

.style(''shape-rendering'',''crispEdges'')

Esto hace que la línea sea más delgada.

Si desea lograr lo mismo con CSS, agregue el siguiente estilo:

.the_Line_CLass{
  shape-rendering: crispEdges;
}

Answer 4

Si las líneas son horizontales o verticales, simplemente coloque las líneas a medio píxel apagado, como x="1.5px" .

Otra forma es aplicar algo de CSS a las líneas:

.thelines{
    shape-rendering:crispEdges
}

El capítulo de especificaciones sobre la propiedad de representación de formas.

Answer 5

fijar:

<line
  x1="10" y1="1"
  x2="90" y2="1.0001" // hack: horizontal line in SVG not visible in Chrome
  stroke="#FF0000"
  strokeWidth="1"/>

Ref: http://code.tonytuan.org/2016/09/svg-horizontal-line-not-visible-in.html

Answer 6

tal vez un poco tarde, pero la verdadera razón para esto es que cuando dibuja en una línea de cuadrícula que es infinitamente pequeña, la línea con anchura de trazo 1 se representa como medio píxel a la izquierda y a la derecha (o arriba / abajo) de la cuadrícula línea. Lo resolví agregando un grupo alrededor de todos los objetos con la transformación 0.5,0.5 para que todo se moviera a la mitad de la línea de la cuadrícula.

Entonces, todo lo que dibuja ahora está exactamente en el medio entre 2 líneas de cuadrícula. Una línea con un ancho de trazo 1 tendrá ahora medio píxel a la izquierda y medio píxel a la izquierda, pero ambos desde el centro. Resultando en una línea con exactamente el grosor que deseaba: 1 píxel ...

Ejemplo:

<g transform="translate(0.5,0.5)">
 <g>
   <path />
   <path />
 </g>
 <g>
   <path />
   <path />
 </g>
</g>