Style SVG loaded to HTML as content tag with CSS [closed]

问题

I have 3 files:

index.html

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
    <i class="logo myRed" aria-hidden="true"></i>
</body>
</html>

style.css

.logo:before {
    content: url("logo.svg");
}
.myRed {
    color: #ff2000;
}

logo.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 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="100">
    <rect id="logo" width="300" height="100" />
</svg>

How to style svg content in CSS? (eg. color, font-size, ...) - like in FontAwesome.

回答1:

You can't.

CSS content: url(image.ext) is similar to loading your image in a <img> tag. And loading an image in a <img> is under the hood loading it in an isolated document, inaccessible for anyone, and which can't access anything.

FontAwesome doesn't load icons like that, they build font-faces, and then call corresponding characters in the content property, e.g something like "\f07b".
So for the browser, FontAwesome icons are just text, and you can style it like any other text.

To style an svg through css, it needs to be in the same document as your stylesheet.

Ok, there is one hack, which may help you, but I can't tell how well it is nor will be supported :
Lea Verou demonstrated that we can (ab)use the target: CSS selector along with the #elem_id fragment identifier to show specific nodes of an SVG Element or apply specific rules.

In you svg's <style> you can create rules like these ones :

#elem_id_1:target ~ #elem_to_color{
    fill: red;
}
#elem_id_2:target ~ #elem_to_color{
    fill: green;
}

Then in your markup, you just need to have some empty elements placed before #elem_to_color with corresponding ids.

<g id="elem_id_1"></g>
<g id="elem_id_2"></g>
<rect id="elem_to_color"/>

Now when you will load your svg as yourfile.svg#elem_id_1, the first rule will apply and #elem_to_color will be red. If you load it as yourfile.svg#elem_id_2, then #elem_to_color will be green.

This hack allows to have a single svg file, on which we can externally control the rendered styles.

/* a single file for all colors */

.logo::after {
  content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg);
}

.logo.green::after {
  content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#green);
}

.logo.red::after {
  content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#red);
}

<!-- logo.svg content
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
  <style>
    #green:target ~ #elem_to_color{
      fill: green;
    }
    #red:target ~ #elem_to_color{
      fill: red;
    }
  </style>
  <g id="red"></g>
  <g id="green"></g>
  <rect id="elem_to_color" width="30" height="30"/>
</svg>
-->

<i class="logo"></i>
<i class="logo green"></i>
<i class="logo red"></i>

回答2:

Use these CSS properties:

fill:  /* color */
font-size:   /* font-size */

It will override the original SVG values, as demonstrated below.

.logo svg {
  fill: #eee;
}
.logo svg text {
  font-size: 30px;
}
.myRed {
color: #ff2000;
}

<div class="logo myRed" aria-hidden="true">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="logo" width="300" height="100" />
    <text style=" stroke:black; fill:red;" x="30" y="50" font-size="8">Text Here</text>
  </svg>
</div>

回答3:

A more simplified solution would be the following. The first line of css sets the text color (fill), the second line sets the font properties for the text element and the third line targets the rectangle id (logo) to set the fill.

.logo svg {
  fill: #ff0000;
}
.logo svg text {
  font-size: 45px;
  font-face:Arial,Helvetica;
  font-weight:bold
}
#logo {
  fill:#eee;
}

<div class="logo" aria-hidden="true">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="logo" width="300" height="100" />
    <text x="30" y="50">Text Here</text>
  </svg>
</div>

来源：https://stackoverflow.com/questions/46045185/style-svg-loaded-to-html-as-content-tag-with-css

标签

html

css

svg

font-awesome