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

ReSQL.ru

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

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

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

14 сообщений из 14, страница 1 из 1

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

#40119387

катастрофа

Участник

Сообщения: 2 519

Рейтинг: 0 / 0

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

Код: 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, 09:50

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

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

#40119392

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

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

...

Рейтинг:

0 / 0

12.12.2021, 11:03

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

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

#40119395

voraa

Гость

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

Код: 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, 11:20

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

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

#40119403

катастрофа

Участник

Сообщения: 2 519

Рейтинг: 0 / 0

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

...

Рейтинг:

0 / 0

12.12.2021, 12:45

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

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

#40119418

катастрофа

Участник

Сообщения: 2 519

Рейтинг: 0 / 0

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

...

Рейтинг:

0 / 0

12.12.2021, 15:11

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

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

#40119425

вадя

Участник

Откуда: Екатеринбург

Сообщения: 19 399

Рейтинг: 0 / 0

катастрофа,

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

...

Рейтинг:

0 / 0

12.12.2021, 15:35

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

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

#40119452

катастрофа

Участник

Сообщения: 2 519

Рейтинг: 0 / 0

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

Код: 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, 18:44

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

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

#40119478

вадя

Участник

Откуда: Екатеринбург

Сообщения: 19 399

Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

12.12.2021, 20:19

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

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

#40119479

катастрофа

Участник

Сообщения: 2 519

Рейтинг: 0 / 0

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

...

Рейтинг:

0 / 0

12.12.2021, 20:21

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

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

#40119480

voraa

Гость

катастрофа

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

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

...

Рейтинг:

0 / 0

12.12.2021, 20:22

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

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

#40119487

вадя

Участник

Откуда: Екатеринбург

Сообщения: 19 399

Рейтинг: 0 / 0

катастрофа,

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

Код: css

1.
2.
3.

#x1{
  pointer-events: none;
}

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

...

Рейтинг:

0 / 0

12.12.2021, 20:46

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

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

#40119490

PizzaPizza

Участник

Сообщения: 499

Рейтинг: 0 / 0

voraa

катастрофа

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

...

Рейтинг:

0 / 0

12.12.2021, 20:50

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

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

#40119569

катастрофа

Участник

Сообщения: 2 519

Рейтинг: 0 / 0

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

...

Рейтинг:

0 / 0

13.12.2021, 10:21

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

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

#40119658

вадя

Участник

Откуда: Екатеринбург

Сообщения: 19 399

Рейтинг: 0 / 0

катастрофа,

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

...

Рейтинг:

0 / 0

13.12.2021, 15:04

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

14 сообщений из 14, страница 1 из 1

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

Цитировать

Написать

Автор*:

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

Тема*:

Сообщение

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

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

Автор:

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

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

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

Вложение:

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

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

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

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

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

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

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

start [/forum/topic.php?fid=22&gotonew=1&tid=1443149]:	0ms
get settings:	10ms
get forum list:	14ms
check forum access:	4ms
check topic access:	4ms
track hit:	36ms
get topic data:	12ms
get first new msg:	8ms
get forum data:	3ms
get page messages:	59ms
get tp. blocked users:	2ms
others:	267ms

total:	419ms