xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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

(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!

refs



©xgqfrms 2012-2021

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

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


posted @ 2019-12-30 19:08  xgqfrms  阅读(152)  评论(9编辑  收藏  举报