vrr/doc
2
0
Fork 0
mirror of https://github.com/bpmbpm/doc.git synced 2026-04-29 20:10:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add files via upload

Browse source
This commit is contained in:
Dmitry 2025-03-17 17:59:30 +03:00 • committed by GitHub
parent 57e64dd5d1
commit 300efa21ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 155 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

10
test/AI/code/SVG/image.svg Normal file
View file

@ -0,0 +1,10 @@
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="one" x="10" y="10" width="80" height="30" fill="lightblue" />
<text x="20" y="30" font-family="Verdana" font-size="15">Один</text>
<rect id="two" x="10" y="50" width="80" height="30" fill="lightgreen" />
<text x="20" y="70" font-family="Verdana" font-size="15">Два</text>
<rect id="three" x="10" y="90" width="80" height="30" fill="lightcoral" />
<text x="20" y="110" font-family="Verdana" font-size="15">Три</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 551 B

80
test/AI/code/SVG/svg_in_html_OK.html Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG и Список</title>
<style>
body {
display: flex;
justify-content: space-between;
padding: 20px;
}
#svgContainer {
border: 1px solid #ccc;
width: 45%;
height: 300px;
}
#listContainer {
border: 1px solid #ccc;
width: 45%;
height: 300px;
overflow-y: auto;
}
.list-item {
padding: 5px;
cursor: pointer;
}
.list-item:hover {
background-color: #f0f0f0;
}
.selected {
background-color: #d0e0ff;
}
</style>
</head>
<body>
<div id="svgContainer">
<svg width="100%" height="100%">
<rect id="rect1" x="10" y="10" width="100" height="50" fill="lightblue" />
<text x="20" y="40" fill="black">Один</text>
<rect id="rect2" x="10" y="70" width="100" height="50" fill="lightgreen" />
<text x="20" y="100" fill="black">Два</text>
<rect id="rect3" x="10" y="130" width="100" height="50" fill="lightcoral" />
<text x="20" y="160" fill="black">Три</text>
</svg>
</div>
<div id="listContainer">
<div class="list-item" data-target="rect1">Один</div>
<div class="list-item" data-target="rect2">Два</div>
<div class="list-item" data-target="rect3">Три</div>
</div>
<script>
const listItems = document.querySelectorAll('.list-item');
const svgElements = document.querySelectorAll('rect');
listItems.forEach(item => {
item.addEventListener('click', () => {
// Удаляем выделение со всех элементов списка
listItems.forEach(i => i.classList.remove('selected'));
// Добавляем выделение к текущему элементу
item.classList.add('selected');
// Получаем id целевого элемента SVG
const targetId = item.getAttribute('data-target');
const targetElement = document.getElementById(targetId);
// Удаляем выделение со всех SVG элементов
svgElements.forEach(el => el.setAttribute('stroke', 'none'));
// Добавляем выделение к целевому элементу
targetElement.setAttribute('stroke', 'black');
targetElement.setAttribute('stroke-width', '2');
});
});
</script>
</body>
</html>

65
test/AI/code/SVG/you_svg_focus.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Focus Example</title>
<style>
#left, #right {
width: 45%;
height: 200px;
float: left;
border: 1px solid #ccc;
margin: 5px;
overflow: auto;
}
#left {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div id="left">
<h3>Элементы SVG</h3>
<ul id="svg-elements-list"></ul>
</div>
<div id="right">
<h3>SVG Изображение</h3>
<object id="svg-object" data="image.svg" type="image/svg+xml" width="200" height="200"></object>
</div>
<script>
const svgObject = document.getElementById('svg-object');
const svgElementsList = document.getElementById('svg-elements-list');
svgObject.addEventListener('load', function() {
const svgDoc = svgObject.contentDocument;
if (!svgDoc) {
console.error("Не удалось загрузить SVG документ.");
return;
}
const elements = svgDoc.querySelectorAll('[id]');
if (elements.length === 0) {
console.warn("SVG не содержит элементов с id.");
return;
}
elements.forEach(element => {
const li = document.createElement('li');
li.textContent = element.id;
li.style.cursor = 'pointer';
li.addEventListener('click', () => {
element.focus();
console.log(`Элемент с id "${element.id}" выделен.`);
});
svgElementsList.appendChild(li);
});
});
svgObject.addEventListener('error', function() {
console.error("Не удалось загрузить SVG документ.");
});
</script>
</body>
</html>