![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/rectangle-wz-sides@2x.png\")
\n<\/div>\nВ СВГ всё задаётся строго по координатам, хорошо масштабируется, но не умеет «адаптироваться» под содержание. Поэтому c СВГ не обойтись без двух шаблонов и надежды, что они выдержат подписи любой длины. Можно усилить СВГ скриптом, но для меня это выглядело суперлишним. Казалось, что справятся ХТМЛ с ЦССом.<\/p>\n
Исходный ХТМЛ простейший:<\/p>\n
<div>\r\n <span>22 м<\/span>\r\n <div><\/div>\r\n <span>14 м<\/span>\r\n<\/div><\/code><\/pre>Первое, что решал: как выравнивать подписи по центру стороны. Понятно, что для верхней подписи нужен «text-align: center», но как ограничить длину подписи, чтобы она равнялась длине прямоугольника, а не всего родительского дива? Можно дублировать width для прямоугольника и подписи, но это не DRY<\/a> и неудобно в поддержке. Выручило свойство box-sizing<\/a>, которое говорит, как считать ширину и высоту элемента. Добавил родительскому диву «box-sizing: content-box» — указанные размеры элементы не будут включать падинги и обводки.<\/p>\n.rectangle {\r\n position: relative;\r\n box-sizing: content-box;\r\n padding-top: отступ, подходящий под высоту подписи; \r\n}<\/code><\/pre>Теперь можно наследовать длину родителя и позиционировать подписи вне его:<\/p>\n
.rectangle-width, .rectangle-height {\r\n display: inline-block;\r\n position: absolute;\r\n white-space: nowrap;\r\n}\r\n\r\n.rectangle-width {\r\n width: inherit;\r\n top: 0;\r\n text-align: center;\r\n}<\/code><\/pre>Если текст длиннее отведённой длины, то он начинается от левого края и благодаря «white-space: nowrap» не переносится.<\/p>\n
.rectangle-height {\r\n left: calc(100% + отступ от фигуры);\r\n top: 60%;\r\n transform: translateY(-40%);\r\n}<\/code><\/pre>Transform и top и выравнивают подпись и фигуру по горизонтали. Если родитель без падинга, сработает «top: 50%; transform: translateY(-50%)». В моём случае разницу в 20% нашёл на глаз.<\/p>\n
В конце разбираюсь с прямоугольником. Ширину и высоту он наследует у родителя, а ровно поместиться в отведённые границы помогает свойство «box-sizing: border-box», которое, наоборот, включает падинги и обводку.<\/p>\n
.rectangle-figure {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n width: inherit;\r\n height: inherit;\r\n border: 1px solid цвет;\r\n}<\/code><\/pre>Итоговый ХТМЛ английской версии (без оформления футов):<\/p>\n
<div class="rectangle" style="width: длина; height: высота">\r\n <span class="rectangle-width">22 m 72.2 ft<\/span>\r\n <div class="rectangle-figure"><\/div>\r\n <span class="rectangle-height">14 m<br>45.9 ft<\/span>\r\n<\/div><\/code><\/pre>\n![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/rectangle-wz-sides-layout@2x.png\")
\n<\/div>\nКроме редактирования текста, код требует один раз задать размеры прямоугольника инлайн.<\/p>\n",
"date_published": "2018-09-10T13:42:22+03:00",
"date_modified": "2018-09-10T13:41:44+03:00",
"image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/rectangle-wz-sides@2x.png",
"_date_published_rfc2822": "Mon, 10 Sep 2018 13:42:22 +0300",
"_rss_guid_is_permalink": "false",
"_rss_guid": "672",
"_e2_data": {
"is_favourite": false,
"links_required": [
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css",
"system\/library\/highlight\/highlight.js",
"system\/library\/highlight\/highlight.css"
],
"og_images": [
"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/rectangle-wz-sides@2x.png",
"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/rectangle-wz-sides-layout@2x.png"
]
}
},
{
"id": "477",
"url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/svg-icons\/",
"title": "СВГ-иконки на практике",
"content_html": "
Кроме разрешения и веса, СВГ-иконки умеют удобно хранить несколько состояний. Так не в силах ни один растр. Количество состояний — признак, по которому делю иконки на «сплошные» и «слоёные».<\/p>\n
Если иконка работает, как ссылка — целиком меняет цвет при наведении (или посещении), то про себя называю её «сплошной». С ней можно работать вслепую, не заглядывая внутрь. Говорим через ЦСС всему СВГ: «будь при наведении красным», и всё.<\/p>\n
\n![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/calendar-icon@2x.png\")
\n<\/div>\nА если цвет меняют отдельные части, называю иконку «слоёной». Потому что такие игры возможны, только когда внутри СВГ формы лежат в отдельных элементах друг над другом — слоями.<\/p>\n
\n![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/star-icon@2x.png\")
\n<\/div>\nКогда появляется такое поведение, первая идея — применить ЦСС-бордер к сплошной иконке. Но лучше не торопиться. Бордер всегда позиционируется по центру. Если контур однопиксельный, браузер нарисует линию в два полупрозрачных пикселя. И иконка станет мыльной на неретиновом экране.<\/p>\n
\n![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/star-border@2x.png\")
\n<\/div>\nДаже если контур будет кратным, сглаживание углов бордером или выход за пределы иконки могут мешать. Поэтому лучше положить в СВГ отдельные слои и управлять ими.<\/p>\n
\n![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/star-layers@2x.png\")
\n<\/div>\nПри этом слой с формой в виде обводки не сработает. ЦСС покрасит не только внешнюю форму, но и внутреннюю.<\/p>\n
\n![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/star-bad-layers@2x.png\")
\n<\/div>\nЕсли иконка слоёная, обратиться через ЦСС ко всему СВГ не получится. Нужно манипулировать элементами внутри. Это легко с инлайновым СВГ — добавил классы к нужным элементам и готово. Иконка фулскрина в карточке на сайте лаборатории<\/a>:<\/p>\n\n![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/full-screen-icon@2x.png\")
\n<\/div>\n<svg class="full-screen" xmlns="http:\/\/www.w3.org\/2000\/svg">\r\n <g>\r\n <path d="M7,7 L7,8 L6.00097656,8 L6.00097656,9 L5,9 L5,8 L0,8\r\n L0,18 L10,18 L10,13 L9,13 L9,12 L10,12 L10,11 L11,11 L11,10 L12,10\r\n L12,9 L13,9 L13,10 L18,10 L18,0 L8,0 L8,5 L9,5 L9,6 L8,6 L8,7 L7,7 Z"\r\n fill="#FFF"\/>\r\n\t\t\t\r\n <path class="variable" d="M9.538,3.077 L13.935,3.077 L9.538,7.475 L9.538,8.462 \r\n L10.525,8.462 L14.923,4.065 L14.923,8.462 L16,8.462 L16,2 L9.538,2 L9.538,3.077 \r\n Z M3.077,13.938 L3.077,9.54 L2,9.54 L2,16 L8.461,16 L8.461,14.924 L4.063,14.924 \r\n L8.461,10.527 L8.461,9.54 L7.474,9.54 L3.077,13.938 Z" \r\n fill="#666"\/>\r\n <\/g>\r\n<\/svg><\/code><\/pre>Без инлайна сложнее — обращение будет к типу элемента или к атрибуту. Плей в той же карточке:<\/p>\n
\n![\"\"](\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/play-icon@2x.png\")
\n<\/div>\n<svg class="play" xmlns="http:\/\/www.w3.org\/2000\/svg">\r\n <g>\r\n <polygon fill="#FFF" points="0 0 0 22 19 11"><\/polygon>\r\n \r\n <path class=“play-fill“ d="M2,3L2 19 15 11z" fill="#666"><\/path>\r\n \r\n <path class="play-void“ d="M3,4.99999999L3 17 13 11z" fill="#666"><\/path>\r\n <\/g>\r\n<\/svg><\/code><\/pre>Допустим, он не инлайновый. Тогда при наведении будем менять цвет только элементов «path». Нижний полигон всегда белый. Верхнему треугольнику стоит задать по умолчанию заливку «none», чтобы обращаться к нему отдельно и управлять его видимостью.<\/p>\n
Если такая иконка будет сплошной, понадобиться ещё один СВГ с белым фоном под ней. Это замусорит код и может привести к ошибкам при масштабировании.<\/p>\n