Добавить границу в SVG

Question

У меня SVG используется в качестве делителя, и мне было интересно, могу ли я добавить на кривую SVG синюю или черную рамку, которая следует по пути кривой.

<svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
           <path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
     </svg>

Answer 1

Конечно - просто нарисуйте контур с обводкой поверх фигуры.

<svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
           <path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
                      <path fill="none" stroke="grey" stroke-width="1px" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0"></path>
     </svg>

Вы также можете обводить исходный путь и использовать штрих-черту соответствующей конструкции, чтобы da sh покрывал только верхнюю часть фигуры. Или вы можете использовать фильтр SVG, чтобы добавить границу к верхнему краю. Простое рисование границы является самым простым.

Answer 2

Вы можете использовать свойство CSS filter, если не можете напрямую отредактировать SVG, чтобы добавить путь (что может быть лучше для go).

svg path {
  filter: drop-shadow(0 -2px 0 blue);
}

<svg class="curve" width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
           <path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
     </svg>