javascript - 如何使用区分大小写的elem名称将元素附加到dom

Question

在下面的示例中，我有一个内联 SVG。您可以看到其中的一些 SVG 元素( <radialGradient> 和 <linearGradient> )是驼峰式大小写。我如何以编程方式将另一个这样的元素添加到 <defs> parent 。

document.createElement()在创建节点之前将其参数转换为小写，因此区分大小写的元素名称会丢失。在我渲染的 SVG 中，正方形仍然是白色的。

有没有办法使用 JavaScript 来做到这一点？

const linearGradient = document.createElement('linearGradient')
linearGradient.id="my-gradient"
linearGradient.setAttribute('x1', '320.38')
linearGradient.setAttribute('y1', '145.87')
linearGradient.setAttribute('x2', '685.45')
linearGradient.setAttribute('y2', '447.31')
linearGradient.setAttribute('gradientUnits','userSpaceOnUse')


 const stop1 = document.createElement('stop')
 stop1.setAttribute('offset', '0')
 stop1.setAttribute('stop-color', '#ed1e79')
 
 
 const stop2 = document.createElement('stop')
 stop2.setAttribute('offset', '1')
 stop2.setAttribute('stop-color', '#ff0')

linearGradient.appendChild(stop1)
linearGradient.appendChild(stop2)

 document.querySelector('svg defs').appendChild(linearGradient)

<svg id="a663773f-8c77-4356-b99a-00f824054fe3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 894.23 805.64">
  <defs>

    <radialGradient id="e87c7fc2-e4ed-4d65-889f-d6153929018e" cx="659.66" cy="541.62" r="261.56" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#615ab2"/>
      <stop offset="1" stop-color="#c0bde0"/>
    </radialGradient>
    <linearGradient id="a0a8f98c-a36f-4841-bfb8-51385632467d" x1="23.64" y1="496.01" x2="632.48" y2="496.01" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/>
      <stop offset="1" stop-color="#96e700"/>
    </linearGradient>
  </defs>
  <title>shapes</title>
  <g>
    <rect x="212.97" y="11" width="529.92" height="529.92" style="fill: url(#my-gradient)"/>
    <path d="M769.89,99V606.92H262V99H769.89m22-22H240V628.92H791.89V77Z" transform="translate(-38 -76.99)"/>
  </g>
  <g>
    <path d="M659.66,803.19a261.58,261.58,0,1,1,185-76.61A259.86,259.86,0,0,1,659.66,803.19Z" transform="translate(-38 -76.99)" style="fill: url(#e87c7fc2-e4ed-4d65-889f-d6153929018e)"/>
    <path d="M659.66,291.06a249.68,249.68,0,1,1-97.52,19.68,249,249,0,0,1,97.52-19.68m0-22c-150.53,0-272.56,122-272.56,272.56s122,272.57,272.56,272.57,272.57-122,272.57-272.57-122-272.56-272.57-272.56Z" transform="translate(-38 -76.99)"/>
  </g>
  <g>
    <polygon points="175.85 576.03 23.64 427.66 233.99 397.1 328.06 206.49 422.13 397.1 632.48 427.66 480.27 576.03 516.2 785.53 328.06 686.62 139.92 785.53 175.85 576.03" style="fill: url(#a0a8f98c-a36f-4841-bfb8-51385632467d)"/>
    <path d="M366.06,308.34l81.65,165.43,5.11,10.37,11.45,1.67,182.57,26.52L514.73,641.11l-8.28,8.07,1.95,11.4,31.19,181.83L376.3,756.56l-10.24-5.38-10.24,5.38L192.53,842.41l31.18-181.83,2-11.4-8.28-8.07L85.28,512.33l182.57-26.52,11.44-1.67,5.12-10.37,81.65-165.43m0-49.71L264.68,464,38,497,202,656.86,163.31,882.63,366.06,776,568.81,882.63,530.09,656.86,694.12,497,467.43,464,366.06,258.63Z" transform="translate(-38 -76.99)"/>
  </g>
</svg>

Answer 1

我认为

document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient')

应该可以工作，根据 this