Создание перекрывающегося элемента div над элементом SVG `path` - PullRequest
Новая
       46

Создание перекрывающегося элемента div над элементом SVG `path`

1 голос
/ 03 марта 2020 

<svg width="700px" height="700px" viewBox="0 0 320 157">
  <defs>
    <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-10">
      <stop stop-color="#E1E6ED" offset="0%"></stop>
      <stop stop-color="#F5F8FB" offset="100%"></stop>
    </linearGradient>
  </defs>

   <path fill="url(#linearGradient-10)"
          d="m12.853 16.0905c-.0688477 0-.138184-.014183-.203125-.0430384l-4.61816-2.05606-4.61816 2.05606c-.170898.0758066-.370117.0493956-.515625-.0670033-.145996-.116888-.214355-.30567-.177734-.489072l1.01855-5.10249-3.56055-3.5668c-.130371-.130582-.178223-.322299-.125-.499343.0532227-.176555.199707-.309583.380371-.345774l5.10352-1.02265 2.0376-4.59239c.161133-.361913.75293-.361913.914063 0l2.0376 4.59239 5.10352 1.02265c.180664.0361915.327148.169219.380371.345774.0532227.177044.0053711.368761-.125.499343l-3.56055 3.5668 1.01855 5.10249c.0366211.183402-.0317383.372184-.177734.489072-.0903321.072383-.201172.110042-.3125.110042zm-4.82129-3.14816c.0693359 0 .138672.014183.203125.0430384l3.93848 1.75381-.881836-4.41681c-.0327148-.164328.0185547-.334036.136719-.452392l3.08936-3.09436-4.44092-.890111c-.15918-.0317899-.292969-.138897-.358887-.287575l-1.68604-3.7996-1.68604 3.7996c-.065918.148678-.199707.255785-.358887.287575l-4.44092.890111 3.08936 3.09436c.118164.118356.169434.288064.136719.452392l-.881836 4.41681 3.93848-1.75381c.064453-.0288553.133789-.0430384.203125-.0430384z"
          transform="translate(-.032 -.09)" />
</svg>

Я пытаюсь создать div с высотой и шириной для элемента path, и он находится в том же месте, что и path. Для этого я создаю внешний объект с div внутри. Я получаю координаты x, y, height, width, используя getBoundingClientRect(). Однако после применения ширины высоты к постороннему объекту, она не имеет такого же размера, как path element (в действительности она намного больше его), а также координаты x, y не устанавливаются должным образом.

Как я могу создать div чуть выше элемента пути svg, имеющий высоту, ширину, x и y, аналогичные path, так что он будет перекрывать элемент path? Кажется, что foreignObject принимает height и width в других единицах.

enter image description here

На приведенном выше снимке экрана height и width из foreignObject имеют значение 511px, однако после проверки элемент, который он принимает за 14745. Я действительно не могу понять, как он принимает разные высоты и ширины?

1 Ответ

1 голос
/ 03 марта 2020

Я вычисляю положение и размер ограничительной рамки звезды, используя метод getBBox(). Также, поскольку звезда преобразуется, я применяю то же преобразование к foreignObject 

//console.log(star.getBBox())
div{width:100%; height:100%; background:rgba(0,0,0,.3)}
<svg width="700px" height="700px" viewBox="0 0 320 157">


   <path fill="gold" id="star"
          d="m12.853 16.0905c-.0688477 0-.138184-.014183-.203125-.0430384l-4.61816-2.05606-4.61816 2.05606c-.170898.0758066-.370117.0493956-.515625-.0670033-.145996-.116888-.214355-.30567-.177734-.489072l1.01855-5.10249-3.56055-3.5668c-.130371-.130582-.178223-.322299-.125-.499343.0532227-.176555.199707-.309583.380371-.345774l5.10352-1.02265 2.0376-4.59239c.161133-.361913.75293-.361913.914063 0l2.0376 4.59239 5.10352 1.02265c.180664.0361915.327148.169219.380371.345774.0532227.177044.0053711.368761-.125.499343l-3.56055 3.5668 1.01855 5.10249c.0366211.183402-.0317383.372184-.177734.489072-.0903321.072383-.201172.110042-.3125.110042zm-4.82129-3.14816c.0693359 0 .138672.014183.203125.0430384l3.93848 1.75381-.881836-4.41681c-.0327148-.164328.0185547-.334036.136719-.452392l3.08936-3.09436-4.44092-.890111c-.15918-.0317899-.292969-.138897-.358887-.287575l-1.68604-3.7996-1.68604 3.7996c-.065918.148678-.199707.255785-.358887.287575l-4.44092.890111 3.08936 3.09436c.118164.118356.169434.288064.136719.452392l-.881836 4.41681 3.93848-1.75381c.064453-.0288553.133789-.0430384.203125-.0430384z"
          transform="translate(-.032 -.09)" />
          
          <foreignObject transform="translate(-.032 -.09)" x="0.03182445466518402" y="0.09050273895263672" width="15.999786376953125" height="15.99999713897705">
          <div></div>
          </foreignObject>
</svg>
...