Выделите область SVG, когда опция выбрана в выпадающем списке - PullRequest
Новая
       8

Выделите область SVG, когда опция выбрана в выпадающем списке

0 голосов
/ 10 мая 2018

могу я спросить, как мне этого добиться? Я хочу выделить область в SVG, когда выбран определенный параметр в раскрывающемся списке. Мой SVG - это карта окрестностей школы, а варианты в раскрывающемся списке - это области школы. Пожалуйста, помогите мне. Спасибо.

1 Ответ

0 голосов
/ 11 мая 2018

Вот пример того, как вы могли бы сделать это: 

var dropDown = document.getElementById('area-dropdown');
var highlightAreas = document.getElementsByClassName('area');

dropDown.addEventListener('change', function() {
    // Remove existing highlights
    for (var i = 0; i < highlightAreas.length; i++) {
        highlightAreas[i].classList.remove('highlight');
    }

    // Get path associated with selected area and
    var selectedArea = document.getElementById('area-' + this.value);
    selectedArea.classList.add('highlight');
});
.area {
    stroke: black;
    stroke-width: 1;
    fill: #b8b8b8;
}

.highlight {
    fill: #ec008c;
}
<form>
    <label>Areas</label>
    <select id="area-dropdown">
        <option selected="selected" disabled="disabled">Select an area</option>
        <option value="a">Area A</option>
        <option value="b">Area B</option>
        <option value="c">Area C</option>
    </select>
</form>

<div style="margin-top:10px">
    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" id="areas-svg">
        <rect id="background" width="300" height="200" fill="#e8e8e8"/>
        <path class="area" id="area-a" d="M20 20H280V80H120V180H20z"/>
        <path class="area" id="area-b" d="M120 80V180H200V80z"/>
        <path class="area" id="area-c" d="M220 100H280V160H220z"/>
    </svg>
</div>

Работает, добавляя класс в выбранную область, что приводит к другой заливке. Вместо этого вы можете изменить видимость путей, используемых для выделения областей.

РЕДАКТИРОВАТЬ: Вот версия с маркерами: 

var dropDown = document.getElementById('area-dropdown');
var highlightAreas = document.getElementsByClassName('marker');

dropDown.addEventListener('change', function() {
    // Remove existing highlights
    for (var i = 0; i < highlightAreas.length; i++) {
        highlightAreas[i].setAttributeNS(null, 'visibility', 'hidden');
    }

    // Get path associated with selected area and
    var selectedArea = document.getElementById('area-' + this.value);
    selectedArea.setAttributeNS(null, 'visibility', 'visible');;
});
.area {
    stroke: black;
    stroke-width: 1;
    fill: #b8b8b8;
}
.highlight {
    fill: #ec008c;
}
text {
    text-anchor: middle;
    dominant-baseline: central;
}
<form>
    <label>Areas</label>
    <select id="area-dropdown">
        <option selected="selected" disabled="disabled">Select an area</option>
        <option value="a">Area A</option>
        <option value="b">Area B</option>
        <option value="c">Area C</option>
    </select>
</form>

<div style="margin-top:10px">
    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" id="areas-svg">
        <rect id="background" width="300" height="200" fill="#e8e8e8"/>
        <path class="area" d="M20 20H280V80H120V180H20z"/>
        <path class="area" d="M120 80V180H200V80z"/>
        <path class="area" d="M220 100H280V160H220z"/>
        <g class="marker" visibility="hidden" id="area-a">
            <circle class="highlight" cx="70" cy="80" r="12"/>
            <text x="70" y="80">A</text>
        <g>
        <g class="marker" visibility="hidden" id="area-b">
            <circle class="highlight" cx="160" cy="130" r="12"/>
            <text x="160" y="130">B</text>
        <g>
        <g class="marker" visibility="hidden" id="area-c">
            <circle class="highlight" cx="250" cy="130" r="12"/>
            <text x="250" y="130">C</text>
        <g>
    </svg>
</div>
...