Редактирование SVG файла с использованием JS

Question

Здраствуйте.

Есть фото, которое добавлено уже в код HTML. Я бы хотел узнать: как сделать так, чтобы пользователь мог выбирать среди двух вариантов - крестик или нолик и нажимая на области, появлялся крестик или нолик соответственно (т.е при выборе одного из двух и нажимая ЛКМ по области, появлялась выбранная фигура (если так можно назвать)). Буду рад за помощь.

Answer 1

Судя по описанию, легче всего будет разбить область на ячейки и затем менять картинку на крестик или нолик. Например, через атрибут src HTML-тэга img.

Если же вы действительно хотите изменять внутренности SVG, то вы можете обращаться к XML-элементам SVG-файла через DOM.

const svg = document.getElementById('svg-element');
const typeSelect = document.getElementById('type-select');
svg.addEventListener('click', ev => {
    const type = typeSelect.options[typeSelect.selectedIndex].value;
    const use = document.createElementNS("http://www.w3.org/2000/svg", 'use');
    use.setAttribute('x', ev.offsetX);
    use.setAttribute('y', ev.offsetY);
    use.setAttribute('href', '#' + type);
    svg.appendChild(use);
});

document.getElementById('clear-button').addEventListener('click', ev => {
    document.querySelectorAll('use').forEach(e => e.remove())
});

path, circle {
    fill: none;
    stroke: #000000;
    stroke-width: 1;
}

<select id="type-select">
    <option value="cross">Cross</option>
    <option value="circle">Circle</option>
</select>
<button id="clear-button">Clear</button>

<div>
    <svg width="300px" height="300px" viewBox="0 0 300 300" version="1.1" id="svg-element"
        xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
        <defs>
            <circle r="30" id="circle" />
            <g id="cross">
                <path d="M -25,-25 25,25" />
                <path d="M -25,25 25,-25" />
            </g>
        </defs>
        <g id="layer1">
            <path d="M 0,100 300,100" />
            <path d="M 0,200 300,200" />
            <path d="M 100,0 100,300" />
            <path d="M 200,0 200,300" />
        </g>
    </svg>
</div>

БЛОГ НА HUSL

Редактирование SVG файла с использованием JS

Ответы (1 шт):