Иконка svg, её отображение и изменение / HTML, JavaScript, VBScript, CSS

2.0.48

Планшетная версия Контакт Правила FAQ Помощь

Гость

Нов. | Гор. | Избр.

Действия ...

Доб. в избранное
Игнор. тему
Прикреп. тему
Пометить прочит. / непрочит.
Фильтр:
Сообщения автора темы
Сообщение содержит вложения
Сообщение содержит картинки
Сообщение содержит видеоклипы
Сообщение содержит аудиоклипы
Сообщение содержит картинки или видео 18+

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Иконка svg, её отображение и изменение / 14 сообщений из 14, страница 1 из 1

12.12.2021, 09:50

#40119387

катастрофа

Участник

Сообщения: 2 519
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

здравствуйте, так:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

<table>
<tr>
<td>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100.353 100.353" style="enable-background:new 0 0 100.353 100.353;" xml:space="preserve">
<g>
	<path style="fill:#231F20;" d="M96.747,39.242c-0.186-0.782-0.97-1.265-1.755-1.079c-0.782,0.187-1.265,0.972-1.078,1.754
		c0.766,3.212,1.155,6.604,1.155,10.083c0,24.85-20.67,45.067-46.078,45.067S2.913,74.85,2.913,50
		c0-24.852,20.67-45.07,46.078-45.07c10.119,0,19.785,3.202,27.952,9.26c0.644,0.479,1.558,0.344,2.037-0.302
		s0.344-1.558-0.302-2.037C70.006,5.417,59.74,2.018,48.991,2.018C21.977,2.018,0,23.542,0,50c0,26.456,21.977,47.98,48.991,47.98
		c27.014,0,48.991-21.524,48.991-47.98C97.982,46.295,97.566,42.676,96.747,39.242z"/>
	<path style="fill:#231F20;" d="M47.98,71.683c-0.386,0-0.756-0.153-1.03-0.426L19.637,43.948c-0.569-0.569-0.569-1.491,0-2.06
		c0.568-0.569,1.49-0.569,2.059,0l26.223,26.219l49.538-55.486c0.536-0.6,1.456-0.652,2.056-0.116s0.652,1.456,0.117,2.056
		L49.066,71.197c-0.267,0.299-0.645,0.475-1.045,0.486C48.007,71.683,47.994,71.683,47.98,71.683z"/>
</g>
</svg>
</td>
</tr>
</table>

я помещаю в нужную мне ячейку таблицы svg изображение, в данном случае чекбокс круглой формы с выбранной галочкой
можно ли и как этот код svg поместить в файл svg.js, например так:

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

const svg = [
['svg1', '
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100.353 100.353" style="enable-background:new 0 0 100.353 100.353;" xml:space="preserve">
<g>
	<path style="fill:#231F20;" d="M96.747,39.242c-0.186-0.782-0.97-1.265-1.755-1.079c-0.782,0.187-1.265,0.972-1.078,1.754
		c0.766,3.212,1.155,6.604,1.155,10.083c0,24.85-20.67,45.067-46.078,45.067S2.913,74.85,2.913,50
		c0-24.852,20.67-45.07,46.078-45.07c10.119,0,19.785,3.202,27.952,9.26c0.644,0.479,1.558,0.344,2.037-0.302
		s0.344-1.558-0.302-2.037C70.006,5.417,59.74,2.018,48.991,2.018C21.977,2.018,0,23.542,0,50c0,26.456,21.977,47.98,48.991,47.98
		c27.014,0,48.991-21.524,48.991-47.98C97.982,46.295,97.566,42.676,96.747,39.242z"/>
	<path style="fill:#231F20;" d="M47.98,71.683c-0.386,0-0.756-0.153-1.03-0.426L19.637,43.948c-0.569-0.569-0.569-1.491,0-2.06
		c0.568-0.569,1.49-0.569,2.059,0l26.223,26.219l49.538-55.486c0.536-0.6,1.456-0.652,2.056-0.116s0.652,1.456,0.117,2.056
		L49.066,71.197c-0.267,0.299-0.645,0.475-1.045,0.486C48.007,71.683,47.994,71.683,47.98,71.683z"/>
</g>
</svg>
']
]

цель, чтобы потом в ячейку можно было помещать <td>svg1 in svg</td>
файл подключил:

Код: javascript

<script src="svg.js"></script>

я опробовал не получилось, или что-то напутал...........
2
как чекбокс сделать в двух вариантах, когда он выбран и НЕ выбран - подкрашивать галочку разными цветами красным и зелёным цветом?
спасибо

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 11:03

#40119392

krvsa

Участник

Откуда: г Волжский
Сообщения: 13 823
Рейтинг: 1 / 0

Иконка svg, её отображение и изменение

катастрофа , вот тебе статейка на тему "svg и его встраивание"...
https://webformyself.com/milliard-sposobov-togo-kak-ispolzovat-svg/

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 11:20

#40119395

voraa

Гость

Иконка svg, её отображение и изменение

катастрофа,
Как то так можно

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

<script>   <!-- Вместо этого можно <script src="svg.js"></script> -->
const svg = [
['svg1', `
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
	 viewBox="0 0 100.353 100.353" style="enable-background:new 0 0 100.353 100.353;" xml:space="preserve">
<g>
	<path style="fill:#231F20;" d="M96.747,39.242c-0.186-0.782-0.97-1.265-1.755-1.079c-0.782,0.187-1.265,0.972-1.078,1.754
		c0.766,3.212,1.155,6.604,1.155,10.083c0,24.85-20.67,45.067-46.078,45.067S2.913,74.85,2.913,50
		c0-24.852,20.67-45.07,46.078-45.07c10.119,0,19.785,3.202,27.952,9.26c0.644,0.479,1.558,0.344,2.037-0.302
		s0.344-1.558-0.302-2.037C70.006,5.417,59.74,2.018,48.991,2.018C21.977,2.018,0,23.542,0,50c0,26.456,21.977,47.98,48.991,47.98
		c27.014,0,48.991-21.524,48.991-47.98C97.982,46.295,97.566,42.676,96.747,39.242z"/>
	<path style="fill:#231F20;" d="M47.98,71.683c-0.386,0-0.756-0.153-1.03-0.426L19.637,43.948c-0.569-0.569-0.569-1.491,0-2.06
		c0.568-0.569,1.49-0.569,2.059,0l26.223,26.219l49.538-55.486c0.536-0.6,1.456-0.652,2.056-0.116s0.652,1.456,0.117,2.056
		L49.066,71.197c-0.267,0.299-0.645,0.475-1.045,0.486C48.007,71.683,47.994,71.683,47.98,71.683z"/>
</g>
</svg>
`]
]
</script>

<body>
<table>
<tr>
<td id='mytd' style="width:40px;height:40px;">
</td>
</tr>
</table>

<script>
document.getElementById('mytd').innerHTML =
	svg.find (e => e[0] === 'svg1')?.[1] || '';
</script>

</body>

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 12:45

#40119403

катастрофа

Участник

Сообщения: 2 519
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

voraa,
то, что нужно спасибо, а напрямую svg файлы подключаются без прокладок с js?, осталось почитать как изменять изображения, если что спрошу))

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 15:11

#40119418

катастрофа

Участник

Сообщения: 2 519
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

спасибо откликнувшимся сделал 4 вида подключения
1 с файла svg
2 с файла html
3 с подключенного файла js
4 с файла svg
осталось в котором из них и как делать изменения
как чекбокс сделать в двух вариантах, когда он выбран и НЕ выбран - подкрашивать галочку разными цветами красным и зелёным цветом? или что-то подобное.........

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 15:35

#40119425

вадя

Участник

Откуда: Екатеринбург
Сообщения: 19 399
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

катастрофа,

выложи на https://jsfiddle.net/
будет проще помогать

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 18:44

#40119452

катастрофа

Участник

Сообщения: 2 519
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

вадя,
извините, на владею, тогда по старинке

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<script src="svg.js"></script> 
</head>

<body>
<table>
<tr>
<td>с файла svg</td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="001.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="002.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="003.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="004.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="005.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="006.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="007.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="008.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="009.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="010.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="011.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="012.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="013.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="014.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="015.svg" alt=""></a></td>
<td><a style="display: inline-block; width: 40px; height: 40px" href="#"><img src="016.svg" alt=""></a></td>
</tr>
<tr>
<td>с файла html</td>
<td>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100.353 100.353" style="enable-background:new 0 0 100.353 100.353;" xml:space="preserve">
<g>
	<path style="fill:#231F20;" d="M96.747,39.242c-0.186-0.782-0.97-1.265-1.755-1.079c-0.782,0.187-1.265,0.972-1.078,1.754
		c0.766,3.212,1.155,6.604,1.155,10.083c0,24.85-20.67,45.067-46.078,45.067S2.913,74.85,2.913,50
		c0-24.852,20.67-45.07,46.078-45.07c10.119,0,19.785,3.202,27.952,9.26c0.644,0.479,1.558,0.344,2.037-0.302
		s0.344-1.558-0.302-2.037C70.006,5.417,59.74,2.018,48.991,2.018C21.977,2.018,0,23.542,0,50c0,26.456,21.977,47.98,48.991,47.98
		c27.014,0,48.991-21.524,48.991-47.98C97.982,46.295,97.566,42.676,96.747,39.242z"/>
	<path style="fill:#231F20;" d="M47.98,71.683c-0.386,0-0.756-0.153-1.03-0.426L19.637,43.948c-0.569-0.569-0.569-1.491,0-2.06
		c0.568-0.569,1.49-0.569,2.059,0l26.223,26.219l49.538-55.486c0.536-0.6,1.456-0.652,2.056-0.116s0.652,1.456,0.117,2.056
		L49.066,71.197c-0.267,0.299-0.645,0.475-1.045,0.486C48.007,71.683,47.994,71.683,47.98,71.683z"/>
</g>
</svg>
</td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-CheckBox"><rect x="3" y="3" width="18" height="18" rx="4"/><path d="M9 12l2.25 2L15 10"/></svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24" fill="currentColor" stroke-width="2" class="ai ai-CheckBoxFill"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 2a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5H7zm8.73 8.684a1 1 0 1 0-1.46-1.368l-3.083 3.29-1.523-1.353a1 1 0 0 0-1.328 1.494l2.25 2a1 1 0 0 0 1.393-.063l3.75-4z"/></svg></td>
</tr>
<tr>
<td>с подключенного файла js</td>
<td id='mytd1' style="width:40px;height:40px;"></td>
<td id='mytd2' style="width:40px;height:40px;"></td>
</tr>
<tr>
<td>с файла svg</td>
<td><div class="containerSVG1"><img/></div></td>
</tr>
</table>
<script>
document.getElementById('mytd1').innerHTML =
	svg.find (e => e[0] === 'svg1')?.[1] || '';
document.getElementById('mytd2').innerHTML =
	svg.find (e => e[0] === 'svg2')?.[1] || '';

let imageElement = document.querySelector(".containerSVG1 img");
imageElement.src = "001.svg";
</script>
</body>
</html>

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 20:19

#40119478

вадя

Участник

Откуда: Екатеринбург
Сообщения: 19 399
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

катастрофа,
примерно так https://jsfiddle.net/kmn7expt/2/

или так https://jsfiddle.net/kmn7expt/3/

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 20:21

#40119479

катастрофа

Участник

Сообщения: 2 519
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

вадя,
спасибо, изучу

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 20:22

#40119480

voraa

Гость

Иконка svg, её отображение и изменение

катастрофа

как чекбокс сделать в двух вариантах, когда он выбран и НЕ выбран - подкрашивать галочку разными цветами красным и зелёным цветом? или что-то подобное.........

Если через img вставлять, то делать разные файлы .svg и менять г img src
Если вставлять кодом <svg> то добираться до элемента (с помощью querySelector, getElementById) и менять у него или его частей соответствующий style. Или цвета задавать в классах css и менять класс.

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 20:46

#40119487

вадя

Участник

Откуда: Екатеринбург
Сообщения: 19 399
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

катастрофа,

посмотри внимательно на вариант https://jsfiddle.net/kmn7expt/4/

Код: css

1.
2.
3.

#x1{
  pointer-events: none;
}

делает прозрачной для клика галочку

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

12.12.2021, 20:50

#40119490

PizzaPizza

Участник

Сообщения: 499
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

voraa

катастрофа

getElementById + innerHTML можно менять содержимое элемента.
svg транслируется как HTML в данном случае

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

13.12.2021, 10:21

#40119569

катастрофа

Участник

Сообщения: 2 519
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

подскажите, а если использовать отображение иконки с подключенного файла js, то по идее там можно и логику его поведения хранить-при наведении на него, при щелчку по нему?

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

13.12.2021, 15:04

#40119658

вадя

Участник

Откуда: Екатеринбург
Сообщения: 19 399
Рейтинг: 0 / 0

Иконка svg, её отображение и изменение

катастрофа,

надо смотреть что это за файл.

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&mobile=1&tid=1443149]:	0ms
get settings:	11ms
get forum list:	13ms
check forum access:	3ms
check topic access:	3ms
track hit:	29ms
get topic data:	11ms
get forum data:	2ms
get page messages:	50ms
get tp. blocked users:	2ms
others:	250ms

total:	374ms