How to dynamically create an SVG title element in JavaScript All In One

How to dynamically create an SVG title element in JavaScript All In One

SVG title

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4">
    <title>I'm a circle</title>
  </circle>

  <rect x="11" y="1" width="8" height="8">
      <!-- <title>I'm a square</title> -->
  </rect>
</svg>

const svg = document.querySelector(`#svg`)
// console.log(`svg`, svg)

const rect = svg.querySelector(`rect`)
console.log(`rect`, rect)

rect.innerHTML = `<title>I'm a square ✅</title>`

http://stackoverflow.com/questions/25999162/title-attribute-not-working-for-an-svg-rect-on-safari

https://www.sitepoint.com/tips-accessible-svg/

https://css-tricks.com/accessible-svgs/

how to creeat svg in js

javascript create svg path

http://xahlee.info/js/js_scritping_svg_basics.html

https://stackoverflow.com/questions/10546135/appending-path-child-within-svg-using-javascript

https://stackoverflow.com/questions/25772742/how-to-place-svg-image-file-in-html-using-javascript

how to create a SVG title element in javascript

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

https://dev.to/tqbit/how-to-create-svg-elements-with-javascript-4mmp

https://stackoverflow.com/questions/30025000/how-to-add-title-to-svg-rectangle-using-pure-javascript-not-d3-js

demos

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---