在 SVG `path` 元素上创建重叠 div

Question

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

我正在尝试创建具有 path 元素高度和宽度的 div，它与 path 元素位于同一位置。为此，我正在创建其中包含 div 的 foreignObject。我正在使用 getBoundingClientRect() 获取 x、y、高度、宽度坐标。然而，在对异物应用高度宽度后，它的大小与path element不同（实际上它比它大很多）并且x，y坐标设置不正确。

我如何在 svg 路径元素上方创建 div，其高度、宽度、x 和 y 与 path 相似，这样它会重叠在 path元素？似乎 foreignObject 在其他单元中接受 height 和 width。

在上面的屏幕截图中，foreignObject 的 height 和 width 设置为 511px 但是，在检查元素后，它被设置为 14745。我真的无法理解它是如何采用不同的高度和宽度的？

Answer 1

我正在使用 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>

在 SVG `path` 元素上创建重叠 div

Creating overlapping div over SVG `path` element

svg

foreignobject