4

Кто может подсказать вот какую штуку. На странице есть изображение, которое увеличивается в зависимости от размера экрана. И на нем есть объекты введите сюда описание изображения Вопрос в том. как отпозиционировать эти объекты, чтобы они не слетали когда изображение увеличивается? Вот тут это реализовано(на последнем экране перед футером) https://straticainternational.com/products/broadway?variant=17254881820761 ,но не могу докопаться как, потому что идет просчет через js как я понимаю. Кто может подсказать как сделать?

Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
Deniskins
  • 362
  • 2
    Элементы абсолютно позиционируются поверх изображения, позиция указывается в процентах. Так же сделано и в примере, никакого js'а не нужно. – MedvedevDev May 01 '19 at 08:14
  • Если вы консоль откроете, то в примере четко видно, что инлайново эти кружки смещаются , вопрос только зачем тогда?и делается там это именно через js – Deniskins May 01 '19 at 08:28
  • @Deniskins с чего вы взяли, что они там js-ом смещаются? Там точно так же заданы позиции точек в процентах и они остаются неизменны при изменении размера – Vadzim Liashkevich May 01 '19 at 08:42
  • в том примере нету SVG но можно на svg это сделать и эффект пульсации тоже ... – Резидент Казахстана May 01 '19 at 09:03
  • Я просто смотрел на консоль и на то, что там меняется инлайново на этих элементах, а значит через js было. И я так понял, что js там используется для тултипов по клику на эти кружки. И мне тултипы тоже будут нужны. – Deniskins May 01 '19 at 09:06
  • да и при съужении окошка все точки плывут – Резидент Казахстана May 01 '19 at 09:06
  • Что плывут не заметил..Хотя сужал – Deniskins May 01 '19 at 09:07

2 Answers2

4

Вот вариант с использованием svg

body{
  margin:0;
  overflow:hidden;
}
circle {
  fill:red;
  transition:200ms;
  cursor:pointer;
  stroke: transparent;
}

g:hover circle, g:hover path {
  transform: scale(1.2) rotate(45deg);


}


g:hover circle{
  stroke-width: 0.5;
  stroke: white;
}


path {
  stroke: white;
  pointer-events: none;
  transition:200ms;
}
<svg viewbox="-100 -50 200 100" preserveAspectRatio="xMinYMin meet">
  <image xlink:href="https://i.stack.imgur.com/fJW6o.png" 
         x="-100" y="-100" height="200" width="200" />
  <g transform="translate(-45,-2)"><circle r="5"/><path d="M2,0L-2,0M0,-2L0,2"/></g>
  <g transform="translate(60,-1)"><circle r="5"/><path d="M2,0L-2,0M0,-2L0,2"/></g>
  <g transform="translate(-14.5,-15)"><circle r="5"/><path d="M2,0L-2,0M0,-2L0,2"/></g>
<svg>
Stranger in the Q
  • 56,055
  • 1
    что я и предлогал ...:)) – Резидент Казахстана May 01 '19 at 09:34
  • 1
    @MaximLensky да, но должны еще набежать любители сделать все на html + css, ничего не имею против однако предпочитаю сразу делать на svg, потому что сегодня просят кружочки, а завтра попросят чтобы у них был градиентный бордер или еще какая нибудь другая дичь – Stranger in the Q May 01 '19 at 09:38
  • -))Спс за ответ. – Deniskins May 01 '19 at 09:45
  • @Deniskins Всегда пожалуйста – Stranger in the Q May 01 '19 at 09:54
  • щас по моему вообще весь сайт можно лепить в SVG почти ВСЁ – Резидент Казахстана May 01 '19 at 09:58
  • 1
    @MaximLensky сайты сайтами, я веб приложения делаю, редакторы там всякие, карты, глобусы, визуализацию разную – Stranger in the Q May 01 '19 at 10:08
  • @MaximLensky Максим, наверное ты видел была здесь на сайте обзорная статья на тему Можно ли весь сайт сделать на SVG там есть и интереснейший ответ от Константина на эту тему – Alexandr_TT May 01 '19 at 11:30
  • @Alexandr_TT mesh давно же появился ..и хорошо поддерживался ..просто он гемеройный ..и не так просто его сжать было ..я пользовался пару раз им – Резидент Казахстана May 01 '19 at 11:35
  • @MaximLensky так это было только в экспериментальных технологиях Chrome и Леа Веру продвигала его вместе со своими плагинами для конических градиентов. Если появилось в финальных документах и примут до конца спецификацию SVG2, то надеюсь будут поддерживать все браузеры, кроме IE разумеется – Alexandr_TT May 01 '19 at 11:44
  • @Alexandr_TT. Я ещё у него работал когда делал яблоко на mesh мне не очень понравилось , забыл поздоровпться – Резидент Казахстана May 01 '19 at 11:54
  • @ПавелВаршавский Привет Павел! Давно не было тебя слышно (((( – Alexandr_TT May 01 '19 at 11:56
  • @Alexandr_TT. Да блин шеф меня на ноль умножил, щас почти концы с концами свожу, буду просится к нему – Резидент Казахстана May 01 '19 at 11:59
  • @ПавелВаршавский Ну он вроде не против сейчас, писал он недавно как-то в комментариях – Alexandr_TT May 01 '19 at 12:02
  • @Alexandr_TT серьёзно ? Я аж поослезился , если возьмёт назад буду молчать блин... – Резидент Казахстана May 01 '19 at 12:05
  • @ПавелВаршавский давай в наш чатик, если хочешь пообщаться немного, пока модераторы по башке не настучали за офтопик А здесь давай почистим за собой – Alexandr_TT May 01 '19 at 12:10
  • @Alexandr_TT Так тебе вроде репа позволяет баллотироваться в модеры ммми ? Ладно я это всё , ухожу пошёл я домой к Максу схожа – Резидент Казахстана May 01 '19 at 12:12
3

Хочу добавить ещё один нюанс. Многие знают, что можно использовать tooltip SVG, который выводится при наведении курсора на объект. Чтобы это работало, нужно объект svg обернуть групповыми тегами <g> и поместить внутрь теги <title> 

<g>
 <title> Первая     позиция установки раковины </title> 
 <path>..... </path> 
</g>

Оказывается можно делать вложенные <title> получая много строчные комментарии

В примере ниже взят код @Stranger in the Q и добавлены много строчные tooltip

body{
  margin:0;
  overflow:hidden;
}
circle {
  fill:red;
  transition:200ms;
  cursor:pointer;
  stroke: transparent;
}

g:hover circle, g:hover path {
  transform: scale(1.2) rotate(45deg);


}


g:hover circle{
  stroke-width: 0.5;
  stroke: white;
}


path {
  stroke: white;
  pointer-events: none;
  transition:200ms;
}
<svg viewbox="-100 -50 200 100" preserveAspectRatio="xMinYMin meet">
  <image xlink:href="https://i.stack.imgur.com/fJW6o.png" 
         x="-100" y="-100" height="200" width="200" />
  <g transform="translate(-45,-2)">
    <title> Первая  позиция установки раковины
   <title>Крепление к каркасу     
   </title>
 </title>
    <circle r="5"/>
  <path d="M2,0L-2,0M0,-2L0,2"/>
 </g>
     <g transform="translate(-14.5,-15)"> 
    <title> Вторая позиция установки раковины
     <title>Крепление к каркасу     
     </title>
 </title>
    <circle r="5"/>
     <path d="M2,0L-2,0M0,-2L0,2"/>
 </g>
 <g transform="translate(60,-1)">
   <title> Третья позиция установки раковины
    <title>Крепление к каркасу     
    </title>
 </title>
   <circle r="5"/>
    <path d="M2,0L-2,0M0,-2L0,2"/>
 </g>

<svg>
Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384