Почему нельзя скрыть группу элементов в SVG с помощью CSS?

Question

[meridbt]

Добрый день, уважаемые коллеги!

Нарисовал в Inkskape svg изображение и сгруппировал несколько элементов, чтобы управлять ими на странице, применяя CSS стили. Для теста вертикальная черта - группа 'on'. При применении стиля 'hidden', группа получает свойство 'display: none'.

Если вставлять изображение как объект:

<object id="mysvg" type="image/svg+xml" data="/assets/image/1.svg" width="300" height="150" >						
					   Your browser does not support SVG
					</object>

, то стиль применяется, но на изображении ничего не изменяется:


Если же скопировать весь код SVG и вставить его через соответствующий тэг:

Полный код вставки svg

<svg
					   xmlns:dc="http://purl.org/dc/elements/1.1/"
					   xmlns:cc="http://creativecommons.org/ns#"
					   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
					   xmlns:svg="http://www.w3.org/2000/svg"
					   xmlns="http://www.w3.org/2000/svg"
					   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
					   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
					   sodipodi:docname="1.svg"
					   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
					   id="mysvg"
					   version="1.1"
					   viewBox="0 0 79.374999 39.687501"
					   height="150"
					   width="300">
					  <defs
						 id="defs2" />
					  <sodipodi:namedview
						 inkscape:window-maximized="0"
						 inkscape:window-y="0"
						 inkscape:window-x="0"
						 inkscape:window-height="730"
						 inkscape:window-width="1350"
						 inkscape:pagecheckerboard="false"
						 units="px"
						 showgrid="false"
						 inkscape:document-rotation="0"
						 inkscape:current-layer="layer1"
						 inkscape:document-units="mm"
						 inkscape:cy="129.6904"
						 inkscape:cx="136.51867"
						 inkscape:zoom="1.5093933"
						 inkscape:pageshadow="2"
						 inkscape:pageopacity="0"
						 borderopacity="1.0"
						 bordercolor="#666666"
						 pagecolor="#ffffff"
						 id="base" />
					  <metadata
						 id="metadata5">
						<rdf:RDF>
						  <cc:Work
							 rdf:about="">
							<dc:format>image/svg+xml</dc:format>
							<dc:type
							   rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
							<dc:title></dc:title>
						  </cc:Work>
						</rdf:RDF>
					  </metadata>
					  <g
						 id="layer1"
						 inkscape:groupmode="layer"
						 inkscape:label="Слой 1">
						<g
						   id="common">
						  <circle
							 style="fill:none;fill-opacity:0.501961;stroke:#ff0000;stroke-width:2.64583;stroke-linejoin:round;stroke-opacity:1;image-rendering:auto"
							 id="path833"
							 cx="38.301121"
							 cy="20.070841"
							 r="13.409775" />
						</g>
						<g
						   id="on">
						  <rect
							 style="fill:none;fill-opacity:0.501961;stroke:#ff0000;stroke-width:2.64583;stroke-linejoin:round;stroke-opacity:1"
							 id="rect841"
							 width="1.4023294"
							 height="15.776206"
							 x="37.512314"
							 y="11.919801" />
						</g>
					  </g>
					</svg>

, то стиль применяется и изображение изменяется соответственно:


Что я делаю не так при вставке объекта? Не хочется переносить код SVG в разметку.

Comments

[Ankhena]

SVG перестали вставлять объектом уже очень давно.
Не хотите инлайном, вставляйте как img.
Но управлять частями не сможете.

Чтобы вставлять инлайном и получить возможность управлять SVG с помощью CSS или JS, но код оставался чистым, используйте SVG спрайты.

[Rustam Bainazarov]

Если вставлять изображение как объект:

Именно в этом. проблема. Для частичного управления SVG — пользуйтесь use и вызов symbol из внешнего файла. Для полного управления придётся встраивать всю разметку в документ целиком.

[meridbt]

Ankhena, спасибо, наверно Ваш ответ и есть ответ на вопрос

Answer 1

[Lynn «Кофеман»]

CSS работает внутри одного документа, а SVG в теге object это другой документ. У него свои стили и стили родительского документа к нему не применяются.

Это примерно то же самое, что требовать применения своих стилей к документу в IFRAME.

Что делать? Лезть внутрь документа (через contentWindow) и править стили там.

Answer 2

[Игорь]

Все работает в точности как вы прописали