CODEWITHSUNDEEP
javascriptiossvgdomcompass-geolocation
Dustin Soodak
Dustin Soodak

Reputation: 583

Create SVG objects with javascript without disabling IOS compass access

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>

Upvotes: 2

Views: 19

Answers (0)

Related Questions