marker-mid
Базовый уровень Широко доступно
Эта функция хорошо зарекомендовала себя и работает на множестве устройств и в разных версиях браузеров. Она доступна в браузерах с июля 2020 года.
Атрибут marker-mid определяет наконечник стрелки или полимаркер, который будет нарисован во всех внутренних вершинах заданной фигуры.
Маркер отображается на каждой вершине, кроме первой и последней вершин данных пути.
Примечание: Как атрибут представления, marker-mid также имеет соответствующее свойство CSS: marker-mid. Если заданы оба значения, приоритет имеет свойство CSS.
Этот атрибут можно использовать со следующими элементами SVG:
Пример
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="circle" markerWidth="8" markerHeight="8" refX="4" refY="4">
<circle cx="4" cy="4" r="4" stroke="none" fill="red" />
</marker>
</defs>
<polyline
fill="none"
stroke="black"
points="20,100 40,60 70,80 100,20"
marker-mid="url(#circle)" />
</svg>
Примечания по использованию
| Значение |
none | <marker-ref>
|
|---|---|
| Значение по умолчанию | none |
| Анимируемый | дискретно |
none-
Указывает, что в заданных вершинах не должен отображаться никакой маркер.
<marker-ref>-
Это значение является ссылкой на элемент
<marker>, который будет отображаться в заданных вершинах. Если ссылка недействительна, маркер отображаться не будет.
Спецификации
Совместимость с браузерами
| Настольные | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari для iOS | Samsung Internet | WebView для Android | WebView для iOS | |
marker-mid |
≤80 | ≤80 | ≤72 | ≤67 | ≤13.1 | ≤80 | ≤79 | ≤57 | ≤13.4 | ≤13.0 | ≤80 | ≤13.4 |
См. также
<marker>marker-startmarker-end- Свойство CSS
marker-mid
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/marker-mid