Как манипулировать svg с css?

я стараюсь манипулировать изображениями svg с css и действительно не имел самого минимального успеха, предполагаю, что это какая-то деталь, которую я не делаю, так как в Интернете есть много примеров этого, которые я пробую и представляю, что он, потому что оно функционирует во все, но я не смог ни размещая svg в html прямо, ни через этикетку img, ни с css в html или в svg так внутри как внешне, на самом деле не смог, если кто-то умеет делать это, я ему благодарен за это. Далее я оставляю им мой код:

vector.html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Vector</title>
	<style type="text/css">
		*
		{
			margin: 0px;
			padding: 0px;
		}

		html, body
		{
			height: 100%;
		}

		body
		{
			background-color: red;
		}
	</style>
</head>
<body>
	<img src="img/drawing.svg" alt="svg">
</body>
</html>

drawing.svg - Файл был создан с inkscape, только я хочу изменить цвет поля ввода, пока, но смог даже не делать это. Признак class="cuadrado" это разместил я вручную, и как они смогут быть закрепленными во второй линии кода, я ввожу css в изображении svg внешним способом.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="epa.css"?>
<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"
   version="1.1"
   id="svg2"
   viewBox="0 0 744.09448819 1052.3622047"
   height="297mm"
   width="210mm">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <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">
    <rect
       y="233.69289"
       x="102.70579"
       height="270.90512"
       width="315.55981"
       id="rect3336"
       style="fill:#00ff00;fill-opacity:1"
       class="cuadrado"/>
  </g>
</svg>

epa.css - Восток сохранил в архиве эту в той же папке изображения svg, и как они смогут видеть, он очень очень основной.

#rect3336
{
  fill: blue;
  fill-opacity:1;
}

Файл "svg" и файл "css" они находятся в папке так называемом "img", файл "vector.html" это в главной папке, а именно "img" подпапка. Я надеюсь, что они помогают мне.

2
задан 22.08.2016, 22:10
3 ответа

Ты очень близко, чтобы не изменять твой SVG, добавь несчастного !important для того, чтобы sobreescriba стиль inline:

#rect3336 {
   fill:#ff0000 !important;
  }
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="epa.css"?>
<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"
   version="1.1"
   id="svg2"
   viewBox="0 0 744.09448819 1052.3622047"
   height="297mm"
   width="210mm">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <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">
    <rect
       y="233.69289"
       x="102.70579"
       height="270.90512"
       width="315.55981"
       id="rect3336"
       style="fill:#00ff00;fill-opacity:1"
       class="cuadrado"/>
  </g>
</svg>

Завися, как ты захотел манипулировать твоими SVG, ты мог бы делать это другой формой:

  • Не применять к нему никакого стиля (inline) к как таковому SVG и делать это полностью с твоего листа стилей.
  • Создавать SVG sprite, чтобы мочь группировать их и снабжать ссылками все их в том же файле.

Редактирование, чтобы использовать внешние таблицы стилей:

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

imagenes.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="cuadrado" viewBox="0 0 744.09448819 1052.3622047" height="297mm" width="210mm">
      <rect
        y="233.69289"
        x="102.70579"
        height="270.90512"
        width="315.55981"/>
    </symbol>
    <!-- otros svg -->
  </svg>

index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Vector</title>
    <link href="estilo.css" rel="stylesheet">
</head>
<body>
    <svg class="imagen1">
      <use xlink:href="imagenes.svg#cuadrado"></use>
    </svg>
</body>
</html>

estilo.css

.imagen1 {
  fill: blue;
}
3
ответ дан 24.11.2019, 13:35
  • 1
    Привет Shaz, разместил c и # 243; я говорю с "! important" непосредственно перед этикетка " defs" внутри этикеток " style" и оно я функционирует таким образом, но оно я не функционирует с внешним файлом, как я пробую это сделать, а именно с " epa.css" какая-то идея? – Ricardo Gabriel 22.08.2016, 22:34
  • 2
    Edit и # 233; ответ, чтобы показывать, как использование SVG с внешними стилями. – Shaz 22.08.2016, 23:58

Я, того, что он сделал бы, состоял бы в том, чтобы превращать SVG в шрифт, который они гораздо более легкие для того, чтобы быть измененным с css.

Брось беглый взгляд в это расширение chrome

https://icomoon.io/app/#/select

1
ответ дан 24.11.2019, 13:35

Cre, который - это из-за того, что использует внешний svg, его части не делают часть DOM внешнему существу и поэтому css не может leerlossi рубки и затруднения svg в html функционирует, также я смотрю, как решать это используя внешний svg

1
ответ дан 24.11.2019, 13:35

Теги

Похожие вопросы