1 

<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(). 但是，在将高度宽度应用于异物后，它的大小与 of 的大小不同path element（实际上它比它大得多），并且 x、y 坐标也没有正确设置。

我怎样才能div在路径元素上方创建svg高度、宽度、x 和 y 相似的元素，path以便在path元素上重叠？这好像是foreignObject接受height和width其他单位。

在此处输入图像描述

在上面的屏幕截图中，heightandwidth被foreignObject设置为一些东西511px，但是，在检查了它作为的元素之后14745。我真的不明白它是如何采用不同的高度和宽度的？

4

1 回答 1

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>

于 2020-03-03T16:57:06.623 回答