Я хотел возиться с этим, потому что мне интересно делать классные вещи с SVG, экспортированным из Visio. Могут быть более элегантные способы решения вашей проблемы, как это было предложено и продемонстрировано другими авторами, но, возможно, моя попытка будет полезна в любом случае.
Я создал jsFiddle, который, я думаю, делает то, что вы хотите. Взгляните: https://jsfiddle.net/visioguy/nv3ew0fh/
Сначала я внес несколько изменений в ваш код :
- Я дал самый верхний a id = "ThePage", чтобы я мог избежать этого в коде js.
- Я установил class = "button" на , который содержит прямоугольник, а не на прямоугольник «подуровня», где он у вас был.
- Я добавил pointer-events = "none" к элементам внутри группы фигур кнопки. При наведении указателя мыши на элемент вызывается отключение мыши, даже если курсор все еще находится внутри группы. Эта установка событий указателя останавливает это поведение, но теперь вы не можете выбрать / скопировать текст. Это может быть просто отлично.
- В jsFiddle есть несколько стилей в отдельной области CSS.
Вот следующие дополнения к стилю CSS:
/*
Make the SVG big enough to see and give
it a subtle color:
*/
svg {
background: whitesmoke;
width: 500px;
height: 500px;
}
/*
Highlight direct <rect> children of any <g>
that has this class:
*/
.rect-highlight > rect {
fill: red;
}
А вот и javaScript. Я использовал querySelectorAll, чтобы найти фигуры в соответствии с CSS правилами. Если вы добавите другие поля без кнопок в , этот код найдет их и выделит:
// Select all <g> elements that are classed as 'button':
let buttonShapes = document.querySelectorAll('.button');
console.log("buttonShapes: ", buttonShapes.length);
// Add the event handlers to all of these button shapes:
for(let buttonShape of buttonShapes) {
buttonShape.addEventListener('mouseenter', mouseEnterEffect);
buttonShape.addEventListener('mouseout' , mouseOutEffect);
}
function mouseEnterEffect(){
// Select all other <g> in the SVG that are not classed as button
// and are not id'd as ThePage:
let otherShapes = document.querySelectorAll('g:not(.button):not(#ThePage)');
console.log("otherShapes:", otherShapes.length);
for(let g of otherShapes) {
g.classList.add("rect-highlight");
}
}
function mouseOutEffect(){
// Select all shapes that are groups <g> and are classed
// with "rect-highlight":
let highlightShapes = document.querySelectorAll('g.rect-highlight');
console.log("highlightShapes:", highlightShapes.length);
for(let g of highlightShapes) {
g.classList.remove("rect-highlight");
}
}
Последнее замечание: вы можете удалить все дополнительные элементы и атрибуты, которые добавляет Visio. По сути, все, что начинается с "v:". Это метаданные, которые Visio может прочитать, если вы решите повторно импортировать svg в Visio позднее. Такие вещи, как поля данных формы, пользовательские ячейки, слои, форматирование текста и другая информация хранятся в этих тегах.