xml - imagenes - SVG esquina redondeada

svg images

Question

Tengo el siguiente SVG:

<g>
  <path id="k9ffd8001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a0a700"></path>
  <path id="kb8000001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="url(#k9ffb0001)"></path>
</g>

Quiero obtener un efecto de border-top-right-radius CSS-como border-top-right-radius y border-top-bottom-radius .

¿Cómo puedo lograr ese efecto de esquina redondeada?

Answer 1

Aquí hay algunos caminos para pestañas:

https://codepen.io/mochime/pen/VxxzMW

<!-- left tab -->
<div>
  <svg width="60" height="60">
    <path d="M10,10 
             a10 10 0 0 1 10 -10
             h 50   
             v 47
             h -50
             a10 10 0 0 1 -10 -10
             z"
      fill="#ff3600"></path>
  </svg>
</div>

<!-- right tab -->
<div>
  <svg width="60" height="60">
    <path d="M10 0   
             h 40
             a10 10 0 0 1 10 10
             v 27
             a10 10 0 0 1 -10 10
             h -40
             z"
      fill="#ff3600"></path>
  </svg>
</div>

<!-- tab tab :) -->
<div>
  <svg width="60" height="60">
    <path d="M10,40 
             v -30
             a10 10 0 0 1 10 -10
             h 30
             a10 10 0 0 1 10 10
             v 30
             z"
      fill="#ff3600"></path>
  </svg>
</div>

Las otras respuestas explicaron la mecánica. Me gustó especialmente la respuesta de hossein-maktoobian.

Los caminos en el corral son los más afectados, los valores pueden modificarse para adaptarse a las dimensiones deseadas.

Answer 2

Como mencioné en mi respuesta a la aplicación de esquinas redondeadas a rutas / polígonos , escribí una rutina en javascript para redondear genéricamente las esquinas de las rutas SVG, con ejemplos aquí: http://plnkr.co/edit/kGnGGyoOCKil02k04snu .

Funcionará independientemente de cualquier efecto de apoplejía que pueda tener. Para usarlo, incluye el archivo rounding.js del Plnkr y llama a la función como sigue:

roundPathCorners(pathString, radius, useFractionalRadius)

El resultado será el camino redondeado.

Los resultados se ven así:

Answer 3

Está utilizando un elemento de ruta, ¿por qué no simplemente le da una curva al camino? Vea aquí cómo hacer curvas usando elementos de ruta: http://www.w3.org/TR/SVG/paths.html#PathDataCurveCommands

Answer 4

Esta pregunta es el primer resultado para Google "svg esquinas redondeadas". La sugerencia de Phrogz de usar stroke tiene algunas limitaciones (a saber, que no puedo usar trazo para otros fines, y que las dimensiones deben corregirse para el ancho de trazo).

La sugerencia de Jlange de usar una curva es mejor, pero no muy concreta. Terminé usando curvas cuadráticas Bézier para dibujar esquinas redondeadas. Considere esta imagen de una esquina marcada con un punto azul y dos puntos rojos en los bordes adyacentes:

Las dos líneas se pueden hacer con el comando L Para convertir esta esquina aguda en una esquina redondeada, comience a dibujar una curva desde el punto rojo izquierdo (use M x,y para moverse a ese punto). Ahora, una curva cuadrática de Bézier tiene un solo punto de control que debe establecer en el punto azul. Establezca el final de la curva en el punto rojo derecho. Como la tangente en los dos puntos rojos está en la dirección de las líneas anteriores, verá una transición fluida, "esquinas redondeadas".

Ahora para continuar la forma después de la esquina redondeada, se puede lograr una línea recta en una curva de Bézier colocando el punto de control entre la línea entre las dos esquinas.

Para ayudarme a determinar la ruta, escribí este script de Python que acepta bordes y un radio. Vector math hace esto realmente muy fácil. La imagen resultante de la salida:

#!/usr/bin/env python
# Given some vectors and a border-radius, output a SVG path with rounded
# corners.
#
# Copyright (C) Peter Wu <[email protected]>

from math import sqrt

class Vector(object):
    def __init__(self, x, y):
        self.x = x
        self.y = y

    def sub(self, vec):
        return Vector(self.x - vec.x, self.y - vec.y)

    def add(self, vec):
        return Vector(self.x + vec.x, self.y + vec.y)

    def scale(self, n):
        return Vector(self.x * n, self.y * n)

    def length(self):
        return sqrt(self.x**2 + self.y**2)

    def normal(self):
        length = self.length()
        return Vector(self.x / length, self.y / length)

    def __str__(self):
        x = round(self.x, 2)
        y = round(self.y, 2)
        return ''{},{}''.format(x, y)

# A line from vec_from to vec_to
def line(vec_from, vec_to):
    half_vec = vec_from.add(vec_to.sub(vec_from).scale(.5))
    return ''{} {}''.format(half_vec, vec_to)

# Adds ''n'' units to vec_from pointing in direction vec_to
def vecDir(vec_from, vec_to, n):
    return vec_from.add(vec_to.sub(vec_from).normal().scale(n))

# Draws a line, but skips ''r'' units from the begin and end
def lineR(vec_from, vec_to, r):
    vec = vec_to.sub(vec_from).normal().scale(r)
    return line(vec_from.add(vec), vec_to.sub(vec))

# An edge in vec_from, to vec_to with radius r
def edge(vec_from, vec_to, r):
    v = vecDir(vec_from, vec_to, r)
    return ''{} {}''.format(vec_from, v)


# Hard-coded border-radius and vectors
r = 5
a = Vector(  0,  60)
b = Vector(100,   0)
c = Vector(100, 200)
d = Vector(  0, 200 - 60)

path = []
# Start below top-left edge
path.append(''M {} Q''.format(a.add(Vector(0, r))))

# top-left edge...
path.append(edge(a, b, r))
path.append(lineR(a, b, r))
path.append(edge(b, c, r))
path.append(lineR(b, c, r))
path.append(edge(c, d, r))
path.append(lineR(c, d, r))
path.append(edge(d, a, r))
path.append(lineR(d, a, r))

# Show results that can be pushed into a <path d="..." />
for part in path:
    print(part)

Answer 5

Has establecido explícitamente que tu stroke-linejoin round pero tu stroke-width 0 , así que por supuesto no verás esquinas redondeadas si no tienes stroke to round.

Aquí hay un ejemplo modificado con esquinas redondeadas hechas a través de trazos:
http://jsfiddle.net/8uxqK/1/

<path d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z"
      stroke-width="5"
      stroke-linejoin="round"
      stroke="#808600"
      fill="#a0a700" />

De lo contrario, si necesita un relleno de forma redondeada real y no solo un trazo graso redondeado, debe hacer lo que @Jlange dice y hacer una forma real redondeada.

Answer 6

No estoy seguro de por qué nadie publicó una respuesta SVG real. Aquí hay un rectángulo SVG con esquinas redondeadas (radio 3) en la parte superior:

<svg:path d="M0,0 L0,27 A3,3 0 0,0 3,30 L7,30 A3,3 0 0,0 10,27 L10,0 Z" />

Esto es un movimiento a (M), línea a (L), arco a (A), línea a (L), arco a (A), línea a (L), trayectoria cerrada (Z).

Los números delimitados por comas son coordenadas absolutas. Los arcos se definen con parámetros adicionales que especifican el radio y el tipo de arco. Esto también podría lograrse con coordenadas relativas (use letras minúsculas para L y A).

La referencia completa para esos comandos se encuentra en la página W3C SVG Paths , y en este artículo puede encontrar material de referencia adicional sobre rutas SVG.

Answer 7

Sé que es tarde para responder esto, pero por el bien de SO, aquí es cómo puedes crear un rectángulo más redondo con SVG Path:

<path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" />

Expansión:

M100,100: Mover al punto (100,100)

h200: Dibuje una línea horizontal de 200px desde donde estamos

a20,20 0 0 1 20,20: Dibuje un arco con 20 píxeles de radio X, 20 píxeles de radio Y, en el sentido de las agujas del reloj, hasta un punto con 20 puntos de diferencia en los ejes X e Y

v200: Dibuje una línea vertical de 200px desde donde estamos

a20,20 0 0 1 -20,20: Dibuje un arco con 20px radio X e Y, en el sentido de las agujas del reloj, hasta un punto con una diferencia de -20px en X y una diferencia de 20px en el eje Y

h-200: Dibuja una línea horizontal de -200px desde donde estamos

a20,20 0 0 1 -20, -20: Dibuje un arco con 20px radio X e Y, en el sentido de las agujas del reloj, hasta un punto con una diferencia de -20px en X y una diferencia de -20px en el eje Y

v-200: Dibuje una línea vertical de -200px desde donde estamos

a20,20 0 0 1 20, -20: Dibuje un arco con 20px X e Y radius, en sentido horario, hasta un punto con 20px de diferencia en X y -20px de diferencia en eje Y

z: cerrar el camino

<svg width="440" height="440">
  <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="black" stroke-width="3" />
</svg>

Answer 8

También consideraría usar un viejo y simple <rect> que proporciona los atributos rx y ry

MDN SVG docs <- observe el segundo elemento rect dibujado

Answer 9

<?php
$radius = 20;
$thichness = 4;
$size = 200;

if($s == ''circle''){
  echo ''<svg width="'' . $size . ''" height="'' . $size . ''">'';
  echo ''<circle cx="'' . ($size/2) . ''" cy="'' . ($size/2) . ''" r="'' . (($size/2)-$thichness) . ''" stroke="black" stroke-width="'' . $thichness . ''" fill="none" />'';
  echo ''</svg>'';
}elseif($s == ''square''){
  echo ''<svg width="'' . $size . ''" height="'' . $size . ''">'';
  echo ''<path d="M'' . ($radius+$thichness) . '','' . ($thichness) . '' h'' . ($size-($radius*2)-($thichness*2)) . '' a'' . $radius . '','' . $radius . '' 0 0 1 '' . $radius . '','' . $radius . '' v'' . ($size-($radius*2)-($thichness*2)) . '' a'' . $radius . '','' . $radius . '' 0 0 1 -'' . $radius . '','' . $radius . '' h-'' . ($size-($radius*2)-($thichness*2)) . '' a'' . $radius . '','' . $radius . '' 0 0 1 -'' . $radius . '',-'' . $radius . '' v-'' . ($size-($radius*2)-($thichness*2)) . '' a'' . $radius . '','' . $radius . '' 0 0 1 '' . $radius . '',-'' . $radius . '' z" fill="none" stroke="black" stroke-width="'' . $thichness . ''" />'';
  echo ''</svg>'';
}
?>