Как создать слезу в HTML?

223

Как мне создать такую ​​фигуру для отображения на веб-странице?

Я не хочу использовать изображения, так как они будут размыты при масштабировании

Форма капли мне нужно сделать с помощью HTML, CSS или SVG

Я попробовал с CSS :

.tear {
  display: inline-block;
  transform: rotate(-30deg);
  border: 5px solid green;
  width: 50px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
<div class="tear">
</div>

Это оказалось действительно облажался.

И тогда я попробовал с SVG:

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

Он получил форму, но нижняя часть не была изогнута.

Есть ли способ создать эту форму, чтобы ее можно было использовать на HTML-странице?

Persijn
источник
12
«Я не хочу использовать изображения, потому что они будут размыты при масштабировании», почему вы масштабируете изображение? Они не размыто , если вы используете [srcset]или в <picture>элемент. Еще лучше, просто ссылку на изображение svg:<img src="tear.svg" alt="Teardrop"/>
zzzzBov
32
@zzzzBov: Вы действительно рекомендуете этот pictureэлемент? Нет поддержки IE, нет поддержки ранних версий Chrome, нет поддержки Safari. Мне продолжать?
jbutler483
9
@zzzzBov. why are you scaling the image?Что ж, изображение может выглядеть размытым, если разработчик не масштабирует его. Все, что вам для этого нужно - это увеличение браузера. В моем случае у меня есть экран HighDPI и множество размытых изображений. Так что, да, если вы можете избежать изображений с помощью SVG, сделайте это.
Нолонар
63
Юникод решает все это ... U + 1F4A7 Thomas
Томас Веллер
21
@ Томас Я вижу квадрат: / i.stack.imgur.com/8fXMf.png
user000001

Ответы:

327

SVG подход:

Вы можете легко получить двойную кривую с помощью встроенного SVG и <path/>элемента вместо <polygon/>элемента, который не допускает изогнутые формы.

В следующем примере используется <path/>элемент с:

<svg width="30%" viewbox="0 0 30 42">
  <path fill="transparent" stroke="#000" stroke-width="1.5"
        d="M15 3
           Q16.5 6.8 25 18
           A12.8 12.8 0 1 1 5 18
           Q13.5 6.8 15 3z" />
</svg>

SVG - отличный инструмент для создания таких форм с двойными изгибами. Вы можете проверить этот пост о двойных кривых с помощью сравнения SVG / CSS. Некоторые из преимуществ использования SVG в этом случае:

  • Кривая управления
  • Контроль заливки (непрозрачность, цвет)
  • Контроль хода (ширина, непрозрачность, цвет)
  • Количество кода
  • Время строить и поддерживать форму
  • Масштабируемость
  • Нет HTTP-запроса (если используется встроенный, как в примере)

Поддержка браузера для встроенного SVG восходит к Internet Explorer 9. См. CanIuse для получения дополнительной информации.

веб-Тики
источник
он может уменьшиться до: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... это заполнит область, которую вы ему дадите, поэтому он может сделать "толстые" или "тощие" капли дождя ... при необходимости изменить фиксированную высоту / ширину
технозавр
1
@technosaurus проблема с уменьшением количества команд в d="..."атрибуте состоит в том, что у вас больше нет двойной кривой в верхней части капли.
веб-тики
10
+1, потому что вы должны использовать SVG для этого, а не CSS. Функции CSS, которые вам понадобятся для достижения этой цели, имеют примерно ту же поддержку браузера, что и SVG, поэтому у CSS нет никаких преимуществ на этот счет. CSS может создавать фигуры, но это не то, для чего он предназначен; не пытайтесь забить гвоздь отверткой просто для того, чтобы быть умным, когда вы можете сделать это точно так же, как с помощью инструмента, предназначенного для этой работы.
Симба
6
Еще лучше: создайте файл SVG и используйте его <img />в гипертекстовом документе.
Андреас Рейбранд
@AndreasRejbrand, который может быть хорошей идеей в зависимости от проекта, но добавляет HTTP-запрос, которого OP, кажется, хочет избежать.
веб-тики
136

Базовый радиус-радиус

Вы можете сделать это в CSS относительно легко, используя border-radius и преобразования. Ваш CSS был только немного.

.tear {
  width: 50px;
  height: 50px;
  border-radius: 0 50% 50% 50%;
  border: 3px solid black;
  transform: rotate(45deg);
  margin-top: 20px;
}
<div class="tear"></div>

Расширенный Граница-Радиус

Это будет очень похоже на приведенное выше, но придает ему немного больше формы.

.tear {
  width: 50px;
  height: 50px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border: 3px solid black;
  transform: rotate(-45deg);
  margin-top: 20px;
}
<div class="tear"></div>

Stewartside
источник
4
@zzzzBov Я не совсем понимаю, как это не тот инструмент, OP попросил решение CSS или SVG, и я придумал решение CSS, которое соответствует описанию как можно ближе. Его легкий и простой в модификации.
Стюартсайд
12
@zzzzBov Использование CSS для изображений и спрайтов является обычным делом. Это очень минимальный кусок кода для генерации общего «образа». Я считаю, что это уместно, потому что его можно использовать в рамках вопросов, которые можно использовать на веб-странице.
Стюартсайд
13
@zzzzBov: CSS отлично подходит для фигур. Кто скажет, для чего используется такая форма? семантически изображение - OP четко заявили, что не хотят использовать изображение, иначе зачем задавать такой вопрос?
jbutler483
46
@ jbutler483, «CSS отлично подходит для фигур» нет, это ужасно. То, что ты можешь , не означает, что ты должен . Он вводит все виды мусора в разметке и является утомительным беспорядком в обслуживании. Изображения намного проще в обслуживании, так как они легко разделяются на отдельный отдельный файл.
zzzzBov
19
«Мусор в разметке» возникает, когда вы используете начальную загрузку или шрифтовые иконки. Серьезно, я думаю, что вы немного превзошли все это, когда (вполне очевидно) это может быть достигнуто с помощью объявления радиуса границы. Но скажите, кто скажет вам не использовать изображения?
jbutler483
88

Ваша основная проблема с вашим кодом CSS была:

  1. Вы использовали другую высоту, чем ширина
  2. Вы не повернули правильный размер угла

Таким образом, «исправляя» эти проблемы, вы бы сгенерировали:

.tear {
  display: inline-block;
  transform: rotate(-45deg);
  border: 5px solid green;
  width: 100px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
/***for demo only***/

.tear {
  margin: 50px;
}
<div class="tear">
</div>

Также обратите внимание, чтобы сэкономить на длине CSS, вы можете переписать ваши свойства border-radius в:

border-radius: 50% 0 50% 50%;

это может быть улучшено с помощью псевдоэлементов, как показано в этой скрипке

альтернативы

Я нашел это по Vinay Challuru на codepen.

Обратите внимание, что с логикой я смог создать SVG практически для любой возможной формы сборки и т. Д. Например, быстрый вывод был:

Он использует SVG и позволяет вам изменять форму несколькими способами, имея возможность изменить ее форму до желаемого результата:

Отказ от ответственности Я не писал вышеупомянутую ручку, только поставил ее.


Версия CSS

Хотя это еще далеко от завершения, вы также можете создать эту форму с помощью CSS.

Версия SVG

Я должен знать, что SVG должен быть на вершине этого ответа, однако мне нравится вызов, и вот попытка SVG.

svg {
  height: 300px;
}
svg path {
  fill: tomato;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100">

  <path d="M49.015,0.803
    c-0.133-1.071-1.896-1.071-2.029,0
    C42.57,36.344,20,43.666,20,68.367   
    C20,83.627,32.816,96,48,96
    s28-12.373,28-27.633
    C76,43.666,53.43,36.344,49.015,0.803z 
    M44.751,40.09   
    c-0.297,1.095-0.615,2.223-0.942,3.386
    c-2.007,7.123-4.281,15.195-4.281,24.537
    c0,5.055-2.988,6.854-5.784,6.854   
    c-3.189,0-5.782-2.616-5.782-5.831
    c0-11.034,5.315-18.243,10.005-24.604
    c1.469-1.991,2.855-3.873,3.983-5.749   
    c0.516-0.856,1.903-0.82,2.533,0.029
    C44.781,39.116,44.879,39.619,44.751,40.09z"/>


</svg>

Изменяя pathзначения, вы сможете изменить форму вашего дизайна слезинки.

jbutler483
источник
10
Все это кажется очень ... многословным. Решение JS особенно абсурдно.
egid
4
@egid: я сказал в своем ответе, что я не создал версию js. Также обратите внимание, что версия js позволяет вам изменять форму во время выполнения
jbutler483
55

ИМО эта форма требует гладкой кривой- Безье, чтобы обеспечить непрерывность кривой.

Капля в вопросе:

Для падения,

  • гладкие кривые не могут быть использованы, так как контрольные точки не будут одинаковой длины. Но нам все еще нужно, чтобы контрольные точки находились точно напротив (180 градусов) по сравнению с предыдущими контрольными точками, чтобы обеспечить полную непрерывность кривой . Изображение, приведенное ниже, иллюстрирует эту точку:

введите описание изображения здесь
Примечание . Красные и синие кривые - это две разные квадратичные кривые.

  • stroke-linejoin="miter", для остроконечной верхней части.

  • Поскольку эта форма использует только последовательные cкоманды, мы можем ее опустить.

Вот последний фрагмент:

<svg height="300px" width="300px" viewBox="0 0 12 16">
  <path fill="#FFF" stroke="black" stroke-width="0.5" stroke-linejoin="miter" 
        d="M 6 1 c -2 3 -5 5 -5 9
           0 7 10 7 10 0 
           0 -4 -3 -6 -5 -9z" />
</svg>

TBH, хотя , кривые принятого ответа не совсем непрерывны.


Для IE 5-8 (VML)

Работает только в IE 5-8. VML использует команды, отличные от SVG . Например. он использует v для относительного кубического Безье .

Примечание. Этот фрагмент также не будет работать в IE 5-8. Вам нужно создать HTML-файл и запустить его прямо в браузере.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <style> v\:* { behavior: url(#default#VML); }

    </style >
</head>
<body>
    <div style="width:240; height:320;">
        <v:shape coordorigin="0 0" coordsize="12 16" fillcolor="white" strokecolor="black" strokewidth="1"
            strokeweight="5" style="width:240; height:320" 
            path="M 6 1 v -2 3 -5 5 -5 9
           0 7 10 7 10 0 
           0 -4 -3 -6 -5 -9 x e">
        </v:shape>
    </div>
</body>
</html>
Макс Пэйн
источник
«Гладкие кривые не могут быть использованы, поскольку контрольные точки не будут одинаковой длины». Разве «сглаживание» не означает, что касательные ручки (контрольные точки) расположены на прямой линии? Почему они должны быть одинаковой длины?
Никколо М.
2
@NiccoloM. В svg гладкая кривая (команды T и S) означает, что дескриптор симметрично противоположен, а также равен длине предыдущего дескриптора . На обычном языке гладкая кривая может означать разные длины дескриптора, но в svg длина также равна предыдущему дескриптору кривых :)
Макс Пейн
42

Или, если шрифт ваших зрителей поддерживает его, используйте символы Unicode

КАПЕЛЬ: 💧 ( &#128167;)

или

ЧЕРНАЯ КАПЛЯ: 🌢 ( &#127778;)

Масштабируйте соответственно!

Gnubie
источник
Вы можете использовать это с @ font-face, но тогда у вас есть файл шрифта для хранения в нужном месте и тому подобное.
1934286
3
SVG и выделенный символ Unicode, как это хорошо. CSS для этого плохо. PNG - это нормально, но не идеально, поскольку это растровая графика. JPG очень плохой, настолько плохой, что у меня будут кошмары, если я его увижу.
Андреас Рейбранд
@AndreasRejbrand 20x20 PNG будет масштабироваться хуже, чем 200x200 JPG. И, с тем же размером, несжатый JPG эквивалентен PNG. Они оба растровые и страдают от одних и тех же проблем.
Нико
@nico: В теории, да, вы можете использовать JPG с нулевым сжатием. Но в Интернете полно таких бедствий, как эта: en.wikipedia.org/wiki/Atomic_number#/media/…
Андреас Рейбранд,
28

Я бы лично использовал SVG для этого. Вы можете создавать SVG в большинстве программ векторной графики. Я бы порекомендовал:

Я сделал один ниже, который отслеживает вашу форму в Illustrator.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="223.14px" height="319.008px" viewBox="0 0 223.14 319.008" enable-background="new 0 0 223.14 319.008" xml:space="preserve">
  <path fill="none" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M111.57,13.291c0,0,57.179,86.984,72.719,108.819
    	c30.359,42.66,41.005,114.694,1.626,154.074c-20.464,20.463-47.533,30.293-74.344,29.488h-0.002
    	c-26.811,0.805-53.88-9.025-74.344-29.488C-2.154,236.804,8.492,164.77,38.851,122.11C54.391,100.275,111.57,13.291,111.57,13.291z" />
</svg>

Djave
источник
27

HTML Canvas

Эта опция пока не раскрыта в этой теме. Команды, используемые для рисования на холсте, очень похожи на SVG (и веб-тики заслуживают похвалы за основную идею, использованную в этом ответе).

Соответствующая фигура может быть создана либо с помощью собственных кривых команды Canvas (Quadratic или Bezier), либо с помощью API Path. Ответ содержит примеры для всех трех методов.

Поддержка браузера для Canvas довольно хорошая .


Использование квадратичных кривых

window.onload = function() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.moveTo(120, 20);
    ctx.quadraticCurveTo(117.5, 30, 148, 68);
    ctx.arc(120, 88, 34.5, 5.75, 3.66, false);
    ctx.quadraticCurveTo(117.5, 35, 120, 20);
    ctx.closePath();
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.fillStyle = '#77CCEE'
    ctx.stroke();
    ctx.fill();
  }
}
canvas {
  margin: 50px;
  height: 100px;
  width: 200px;
  transform: scale(1.5);
}

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<canvas id='canvas'></canvas>

Ниже представлена расширенная версия с градиентной заливкой и тенями. Я также включил hoverэффект на фигуру, чтобы проиллюстрировать один недостаток Canvas по сравнению с SVG. Холст основан на растре (пикселях) и, следовательно, будет выглядеть размытым / пиксельным при масштабировании за пределы определенной точки. Единственным решением для этого было бы перерисовать фигуру при каждом изменении размера браузера, что является накладными расходами.


Использование кривых Безье

Использование Path API

Примечание: Как уже упоминалось в моем answere здесь , Путь API пока не поддерживается IE и Safari.


Дальнейшее чтение:

Гарри
источник
Я не вижу, как SVG всегда лучший вариант. это, конечно, лучший вариант во многих случаях, как этот. Но у холста есть свои плюсы. Хороший ответ. из вашего ответа я могу понять, что, безусловно, гораздо проще использовать SVG!
Макс Пейн
Да, @TimKrul, проще писать / использовать SVG. У Canvas есть свои плюсы, но из того, что я прочитал, он не слишком выгоден при использовании простых логотипов, таких как фигуры, в первую очередь потому, что он основан на растре в отличие от SVG.
Гарри
25

Я также нашел это на Codepen, сделанном пользователем Ana Tudor с использованием CSS и box-shadowстилевых и параметрических уравнений. Очень простой, очень маленький код. И многие браузеры поддерживают стиль CSS3 Box-shadow:

body {
  background-color: black;
}
.tear {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.125em;
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  box-shadow: 0em -5em red, 0.00118em -4.97592em #ff1800, 0.00937em -4.90393em #ff3000, 0.03125em -4.7847em #ff4800, 0.07283em -4.6194em #ff6000, 0.13915em -4.40961em #ff7800, 0.23408em -4.15735em #ff8f00, 0.36em -3.86505em #ffa700, 0.51777em -3.53553em #ffbf00, 0.70654em -3.17197em gold, 0.92382em -2.77785em #ffef00, 1.16547em -2.35698em #f7ff00, 1.42582em -1.91342em #dfff00, 1.69789em -1.45142em #c7ff00, 1.97361em -0.97545em #afff00, 2.2441em -0.49009em #97ff00, 2.5em 0.0em #80ff00, 2.73182em 0.49009em #68ff00, 2.93032em 0.97545em #50ff00, 3.08681em 1.45142em #38ff00, 3.19358em 1.91342em #20ff00, 3.24414em 2.35698em #08ff00, 3.23352em 2.77785em #00ff10, 3.15851em 3.17197em #00ff28, 3.01777em 3.53553em #00ff40, 2.81196em 3.86505em #00ff58, 2.54377em 4.15735em #00ff70, 2.21783em 4.40961em #00ff87, 1.84059em 4.6194em #00ff9f, 1.42017em 4.7847em #00ffb7, 0.96608em 4.90393em #00ffcf, 0.48891em 4.97592em #00ffe7, 0.0em 5em cyan, -0.48891em 4.97592em #00e7ff, -0.96608em 4.90393em #00cfff, -1.42017em 4.7847em #00b7ff, -1.84059em 4.6194em #009fff, -2.21783em 4.40961em #0087ff, -2.54377em 4.15735em #0070ff, -2.81196em 3.86505em #0058ff, -3.01777em 3.53553em #0040ff, -3.15851em 3.17197em #0028ff, -3.23352em 2.77785em #0010ff, -3.24414em 2.35698em #0800ff, -3.19358em 1.91342em #2000ff, -3.08681em 1.45142em #3800ff, -2.93032em 0.97545em #5000ff, -2.73182em 0.49009em #6800ff, -2.5em 0.0em #7f00ff, -2.2441em -0.49009em #9700ff, -1.97361em -0.97545em #af00ff, -1.69789em -1.45142em #c700ff, -1.42582em -1.91342em #df00ff, -1.16547em -2.35698em #f700ff, -0.92382em -2.77785em #ff00ef, -0.70654em -3.17197em #ff00d7, -0.51777em -3.53553em #ff00bf, -0.36em -3.86505em #ff00a7, -0.23408em -4.15735em #ff008f, -0.13915em -4.40961em #ff0078, -0.07283em -4.6194em #ff0060, -0.03125em -4.7847em #ff0048, -0.00937em -4.90393em #ff0030, -0.00118em -4.97592em #ff0018;
}
<div class="tear"></div>

Люк Шимкус
источник
7
Хотя это не похоже на то, о чем просятся слезинки.
двойник
20

Версия CSS

Поскольку здесь довольно много ответов, я подумал, почему бы не добавить к нему другой метод. Это использует HTML и CSS для создания слезинки.

Это позволит вам изменить цвет рамки и фона слезинки, а также изменить размер верхней части.

Используя один, divмы можем создать круг с borderи border-radius. Затем с помощью псевдо - элементов ( :before& :after) мы создаем CSS треугольник больше здесь , это будет действовать как кончике слеза. Используя в :beforeкачестве границы, мы размещаем :afterсверху с меньшим размером и желаемым цветом фона.

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid;
  margin: 80px auto;
  position: relative;
}
div:before,
div:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
}
div:before {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 104px solid black;
  top: -75px;
}
div:after {
  border-left: 46px solid transparent;
  border-right: 46px solid transparent;
  border-bottom: 96px solid #fff;
  top: -66px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}
<div></div>


Вот демо слезинка с цветом фона

Это так же просто, как поместить цвет фона на divи изменить :after bottom-borderцвет на тот же. Чтобы изменить границу, вам нужно изменить divцвет границы и цвет :beforeфона.

румяный
источник
У румяного пера отсутствует значение цвета фона.
Persijn
2
@Persijn Гарри что-то сказал в чате, и я смотрел на него на этой ручке, забывая, что время от времени автоматически сохраняет. Ха-ха, я верну все так, как было. Готово.
Радди
17

Это легко сделать с SVG, просто используя ресурс преобразования изображений, такой как http://image.online-convert.com/convert-to-svg , который использовался для создания следующего:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="213.000000pt" height="300.000000pt" viewBox="0 0 213.000000 300.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.12, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1035 2944 c-143 -250 -231 -380 -508 -752 -347 -465 -432 -616 -493
-882 -91 -394 10 -753 285 -1013 508 -479 1334 -361 1677 240 126 221 165 494
105 726 -66 254 -178 452 -609 1076 -96 140 -226 335 -288 435 -155 249 -135
229 -169 170z m85 -212 c40 -69 192 -298 543 -818 268 -396 354 -593 364 -835
12 -281 -82 -509 -296 -714 -103 -99 -236 -173 -396 -221 -82 -25 -105 -27
-260 -28 -148 -1 -181 2 -255 22 -348 96 -611 357 -691 689 -41 167 -25 392
41 587 62 185 154 334 444 716 177 235 320 444 402 592 27 49 51 88 54 88 3 0
25 -35 50 -78z"/>
</g>
</svg>

анонимное
источник
9
@Persijn, почему ты продолжаешь спрашивать, скопировано ли из какого-то редактора? SVG это SVG, вы можете использовать любой инструмент, который вы хотите создать.
Абхинав Гауниал,
2
@AbhinavGauniyal: «редакторы», как вы их называете, добавляют дополнительный «пух» к объявлениям. Например, 300.000000ptи метаданные, которые на самом деле не нужны
jbutler483
12
@Persijn, что вы подразумеваете под рукой / закодировано. Кто-то просто сделал / hand / закодированный иллюстратор, чтобы просто облегчить свои задачи кодирования, и он все еще производит то же самое. Опять же, когда вы используете svg в браузере, почему бы вам не написать и не написать код на ассемблере? и зачем останавливаться на сборке, от руки / кодировать его с помощью проводов или просто нарисовать его самому. Это не та причина, которую я ожидал.
Абхинав Гауниял,
2
@ jbutler483 да и их можно обрезать. Есть много инструментов, которые делают это для вас, вот один для вас github.com/svg/svgo
Абхинав Гауниял
6
@persijn этот ответ предоставляет необходимые пути SVG. я действительно понятия не имею, каково ваше возражение.
user428517
14

Если вы решите использовать SVG, вы должны прочитать о путях. Я бы также предложил редактор SVG.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-0.05 0 1195.1 703" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" transform="">
    <defs id="svgEditorDefs">
        <line id="svgEditorLineDefs" stroke="black" style="fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px;"/>
    </defs>
    <rect id="svgEditorBackground" x="0" y="0" width="1195" height="703" style="fill: none; stroke: none;"/>
    <path stroke="black" id="e1_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" d="M 198 207 a 117.969 117.969 0 1 0 213 8" transform=""/>
    <path stroke="black" id="e4_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="" d="M 411.348 215.696 a 349.677 349.677 0 0 0 -110.37 -131.718"/>
    <path stroke="black" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="matrix(-0.182706 -0.983168 0.983168 -0.182706 157.664 417.408)" id="e6_circleArc" d="M 301.799 202.299 a 329.763 329.763 0 0 0 -102.951 -124.781"/>
</svg>

Бреннен Спримонт
источник
1
Зачем вам использовать строку внутри тега defs? И вы не можете сделать эту фигуру в один путь не 3 + прямоугольник?
Persijn
6

Вот четыре более простых формы слезы SVG:

введите описание изображения здесь

<svg viewbox="-20 -20 180 180">
  <g stroke="black" fill="none">
    
    <path transform="translate(0)"
     d="M   0  0
        C   0 10  10 17  10 27
        C  10 40 -10 40 -10 27
        C -10 17   0 10   0  0
        Z"/>

    <path transform="translate(40)"
     d="M   0  0
        C   0 16  15 25   5 34
        Q   0 38         -5 34
        C -15 25   0 16   0  0
        Z"/>
    
    <path transform="translate(80)"
     d="M   0  0
        C   0 10  18 36   0 36
        S          0 10   0  0
        Z"/>

    <path transform="translate(120)"
     d="M   0  0
        Q  18 36   0 36
        T          0  0
        Z"/>
    
    
    
    
    <g stroke-width="0.25" stroke="red">
      <g transform="translate(0)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="10"/>
        <ellipse rx="1" ry="1" cx="10"  cy="17"/>
        <ellipse rx="1" ry="1" cx="10"  cy="27"/>
        <ellipse rx="1" ry="1" cx="10"  cy="40"/>
        <ellipse rx="1" ry="1" cx="-10" cy="40"/>
        <ellipse rx="1" ry="1" cx="-10" cy="27"/>
        <ellipse rx="1" ry="1" cx="-10" cy="17"/>
        <line x1="0"   y1="0"  x2="0"   y2="10"/>
        <line x1="10"  y1="17" x2="10"  y2="40"/>
        <line x1="-10" y1="40" x2="-10" y2="17"/>
      </g>
      <g transform="translate(40)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="16"/>
        <ellipse rx="1" ry="1" cx="15"  cy="25"/>
        <ellipse rx="1" ry="1" cx="5"   cy="34"/>
        <ellipse rx="1" ry="1" cx="0"   cy="38"/>
        <ellipse rx="1" ry="1" cx="-5"  cy="34"/>
        <ellipse rx="1" ry="1" cx="-15" cy="25"/>
        <line x1="0"  y1="0"  x2="0"   y2="16"/>
        <line x1="15" y1="25" x2="0"   y2="38"/>
        <line x1="0"  y1="38" x2="-15" y2="25"/>
      </g>
      <g transform="translate(80)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="10"/>
        <ellipse rx="1" ry="1" cx="18"  cy="36"/>
        <ellipse rx="1" ry="1" cx="0"   cy="36"/>
        <ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/>
        <line x1="0"  y1="0"  x2="0"   y2="10"/>
        <line x1="18" y1="36" x2="0"   y2="36"/>
        <line x1="0"  y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/>
      </g>
      <g transform="translate(120)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="18"  cy="36"/>
        <ellipse rx="1" ry="1" cx="0"   cy="36"/>
        <ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/>
        <line x1="18" y1="36" x2="0"   y2="36"/>
        <line x1="0"  y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/>
      </g>
    </g>    
  </g>
  <g font-size="6" transform="translate(-1.5,-4)">
    <text x="-10" y="-8"># of unique points:</text>
    <text transform="translate(  0)">8</text>
    <text transform="translate( 40)">7</text>
    <text transform="translate( 80)">4</text>
    <text transform="translate(120)">3</text>
  </g>
</svg>

Эндрю Виллемс
источник