svgforeignobject

Creating overlapping div over SVG `path` element

<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>

I'am trying to create the div with height and width as of path element and it is at same location as of path. For this I'am creating the foreignObject with div inside it. I'am getting the x, y, height, width co-ordinates using getBoundingClientRect(). However, after applying the height width to foreign object, it is not of same size as of path element(infact it is quite larger than it) and as well x, y co-ordinates does not set properly.

How could I create the div just above the svg path element, having height, width, x and y similar to path so that is will overlap over the path element? It seems like foreignObject accepts height and width in other units.

enter image description here

In the above screen shot, the height and width of foreignObject is set to something 511px however, after inspecting the element it is taking as 14745. I'am not really able to understand how is it taking the different height and width?

Solution

  • I'm calculating the position and the size of the bounding box of the star using the getBBox() method, Also since the star is transformed I apply the same transformation to the 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>