Unable to add children to SVG using Javascript

Not reproducible Issue #10267576

Details

Author
Pav S.
Created
Dec 19, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

With an SVG:

<svg>
  <text>
    <tspan class="myText"></tspan>
  </text>
</svg>

If I was to update the content inside .myText using Javascript like so:

document.getElementsByClassName('myText')[0].innerHTML = 'Some Text';

The content will not be updated. This works in every other browser I have tested, including Chrome, Safari and Firefox.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

    • Thank you for your feedback. We are having difficulties reproducing the issue on MS Edge Windows version 14393.576 (winver.exe). Could you please provide your HTML or SVG sample that can demonstrate the issue? 

      Best regards,
      The MS Edge Team

    • Microsoft Edge Team

      Changed Assigned To from “Ibrahim O.” to “Steven K.”

    • Hi Pav,

      I believe you need to add the “x” and “y” position to the text element when a text element is inside of an SVG element.

      You can also use other element tags if you were to use the “foreignObject” tag.

      I created a repo for you to verify.

      https://codepen.io/prometheusTX/pen/ryqyow

      regards,

      The MS Edge Team

    • Microsoft Edge Team

      Changed Status to “Not reproducible”

    • Hi Pav,

      I am closing this ticket.  Please let us know if you think it should be re-opened.

      Thanks again for the submission.  It helps us improve Edge!

      The MS Edge Team

    You need to sign in to your Microsoft account to add a comment.

    Sign in