Буквально каждый рабочий пример, который я нашел с использованием javascript для создания элементов SVG (например, круга), ссылается на http://www.w3.org/2000/svg.
Проблема в том, что вы не можете получить доступ к компасу в IOS (мобильные устройства), если веб-страница и каждый сайт, на который она ссылается, не являются https с действующим сертификатом SSL.
Я могу использовать setAttribute () для изменения значений СУЩЕСТВУЮЩИХ элементов в svg с помощью xmlns = https: //www.w3.org/2000/svg, но createElementNS () работает только с http-версией.
<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>
