2

Literally every single working example I've found using javascript to create SVG elements (such as a circle) references "http://www.w3.org/2000/svg".

The problem is that you can't access the compass in IOS (mobile devices) unless the webpage and every site it references is https with a valid SSL certificate.

I can use setAttribute() to change the values of EXISTING elements in an svg with xmlns="https://www.w3.org/2000/svg", but createElementNS() only works with the http version.


<svg id="svg1" viewBox="0 0 300 100" xmlns="https://www.w3.org/2000/svg" stroke="red" fill="grey">
    <circle cx="50" cy="50" r="40" id="circle1"/>
    <circle cx="150" cy="50" r="4" />
</svg>
<script>
    //I can at least alter existing elements fine:
    var existing_circle=document.getElementById("circle1");
    existing_circle.setAttribute('r','5');//NS version works too
    //This stops working if https, even after trying all variations with/without "NS":
    var svg=document.getElementById("svg1");    
    var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
    circle.setAttributeNS(null,'cx', "100");
    circle.setAttributeNS(null,'cy', "50");
    circle.setAttributeNS(null,'fill',"red");
    circle.setAttributeNS(null,'stroke','White');
    circle.setAttributeNS(null,'stroke-width','2');
    circle.setAttributeNS(null,'r','10');
    svg.appendChild(circle);
</script>
Dustin Soodak
  • 553
  • 5
  • 15
  • a namespace has nothing to do with a protocol despite them looking similar. Just like a hover fly is not really a wasp. – Robert Longson Jun 24 '21 at 01:58
  • Nice to know, though it wasn't helping even when I tried setting one to http and one to https. IHowever, when I tried it again on Monday, using the http version no longer disabled IOS access to the compass. The only explanation I can think of is that there was a bug fix released over the weekend. – Dustin Soodak Jun 28 '21 at 16:40

0 Answers0