Элементы видны только из инспектора, SVG - PullRequest
Новая
       0

Элементы видны только из инспектора, SVG

0 голосов
/ 10 ноября 2018

Я пытался создать больше кругов с помощью кнопки, но это не работает. Они отображаются в Mozilla Inspector после клика:

инспектор но они не видны для меня. Я видел подобные проблемы здесь, но не было ни одной, которая работает. Не могли бы вы мне помочь? Я понятия не имею, что делать.

circle.js 

class Circle {
constructor(id, posx, posy, r, fill) {
    this.id = id;
    this.posx = posx;
    this.posy = posy;
    this.r = r;
    this.fill = fill;
}}

creator.js 

function createCircle() {

let color = ["blue", "black", "red", "green", "purple", "orange", "yellow"]
const circle = new Circle("node", 100, 100, 50, color[0]);

var node = document.createElement("CIRCLE");
node.setAttribute("id", "node");
node.setAttribute("cx", circle.posx);
node.setAttribute("cy", circle.posy);
node.setAttribute("r", circle.r);
node.setAttribute("fill", circle.fill);
document.getElementById("frame").appendChild(node);

console.log(circle.fill);}

body и from index.html 

<body onload="myFunction()">
<svg id="sss" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg id="frame" width="1020px" height="820px" viewBox="0 0 1020 820">
        <circle id="circle0" cx="100" cy="100" r="50" fill="black" />
    </svg>
</svg>
<button onclick="createCircle()">Create circle</button></body>

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

@ ответ гданиеляна - хороший ответ. Вот демо: 

class Circle {
constructor(id, posx, posy, r, fill) {
    this.id = id;
    this.posx = posx;
    this.posy = posy;
    this.r = r;
    this.fill = fill;
}}

function createCircle() {

let color = ["blue", "red", "green", "purple", "orange", "yellow"]
const circle = new Circle("node", 100, 100, 50, color[0]);

var node = document.createElementNS("http://www.w3.org/2000/svg","circle");
node.setAttributeNS(null,"id", "node");
node.setAttributeNS(null,"cx", circle.posx + Math.random()*100);
node.setAttributeNS(null,"cy", circle.posy + Math.random()*100);
node.setAttributeNS(null,"r", circle.r);
  let _color=color[~~(Math.random()*(color.length))];
  //console.log(_color)
node.setAttributeNS(null,"fill", _color);
document.getElementById("frame").appendChild(node);
}
<svg id="sss" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg id="frame" width="1020px" height="820px" viewBox="0 0 1020 820">
        <circle id="circle0" cx="100" cy="100" r="50" fill="black" />
    </svg>
</svg>
<button onclick="createCircle()">Create circle</button>
0 голосов
/ 10 ноября 2018

Элементы SVG относятся к другому пространству имен, чем типичные элементы HTML. Документ HTML может смешивать теги из разных диалектов XML, например, XHTML, которые являются стандартными элементами HTML, но также и разными диалектами, такими как пространство имен SVG. Чтобы создать правильный элемент из правильного пространства имен, вам нужно использовать другой метод JavaScript, который позволяет вам указать пространство имен: 

document.createElementNS(namespace, element);

Первый аргумент - это пространство имен, поэтому вы должны использовать: "http://www.w3.org/2000/svg",, а второй - элемент, в данном случае" круг ". Поэтому попробуйте: 

var node = document.createElementNS("http://www.w3.org/2000/svg", "circle");

Если вам больше интересно, ознакомьтесь с документами MDN:

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...