Crest, Your main css would only have an effect on the content of the SVG if the SVG file is included inline in the HTML. If you want to keep your SVG in files, the CSS needs to be defined inside of the SVG file. You can do it with a style tag that is inside the SVG.
Otherwise you have to put the code for the svg inside the object tag if you want control of styling it via the parent css. IE: <object id="word.pavement" width="400" height="300" type="image/svg+xml"> <svg xmlns="http://www.w3.org/2000/svg"; id="Layer_1" data-name="Layer 1" viewBox="0 0 600.65 19.96"> <defs> <style> /*If the SVG is NOT inline like you have in your example, the styles must go here*/ <style/> </defs> <path class="aa" d="M8.6,2.9a29.15,29.15,0,0,1,4.83-.38c2.49,0,4.31.58,5.47,1.62A5.34,5.34,0,0,1,20.6,8.22a5.74,5.74,0,0,1-1.5,4.17,8.13,8.13,0,0,1-6,2.14,8.64,8.64,0,0,1-2-.17v7.81H8.6Zm2.52,9.4a8.45,8.45,0,0,0,2.08.2c3,0,4.89-1.5,4.89-4.14s-1.85-3.85-4.6-3.85a10.56,10.56,0,0,0-2.37.2Z" transform="translate(-8.6 -2.52)"/> <path class="ab" d="M33,18.81a23.51,23.51,0,0,0,.2,3.36H30.9l-.2-1.76h-.09a5.22,5.22,0,0,1-4.28,2.08,4,4,0,0,1-4.28-4c0-3.38,3-5.24,8.42-5.21V13a2.87,2.87,0,0,0-3.18-3.21,6.75,6.75,0,0,0-3.67,1L23,9.09a9.07,9.07,0,0,1,4.63-1.22c4.28,0,5.32,2.92,5.32,5.7ZM30.53,15c-2.78-.06-5.93.43-5.93,3.15A2.23,2.23,0,0,0,27,20.6a3.53,3.53,0,0,0,3.44-2.34,2.87,2.87,0,0,0,.12-.81Z" transform="translate(-8.6 -2.52)"/> <path class="ac" d="M37.84,8.16,40.59,16c.46,1.3.84,2.46,1.13,3.62h.09c.32-1.16.72-2.31,1.19-3.62l2.72-7.84h2.66l-5.5,14H40.45l-5.32-14Z" transform="translate(-8.6 -2.52)"/> <path class="ad" d="M51.9,15.63c.06,3.44,2.23,4.86,4.8,4.86a9.1,9.1,0,0,0,3.88-.72L61,21.59a11.41,11.41,0,0,1-4.69.9c-4.31,0-6.89-2.86-6.89-7.09S52,7.88,56,7.88c4.6,0,5.79,4,5.79,6.57a6.24,6.24,0,0,1-.09,1.19Zm7.46-1.82c0-1.59-.67-4.11-3.53-4.11-2.6,0-3.7,2.34-3.91,4.11Z" transform="translate(-8.6 -2.52)"/> <path class="ae" d="M65,12c0-1.48-.06-2.63-.12-3.79h2.23l.12,2.29h.09a4.84,4.84,0,0,1,4.43-2.58,4.13,4.13,0,0,1,3.93,2.81h.06A5.53,5.53,0,0,1,77.3,8.86a4.7,4.7,0,0,1,3.07-1C82.25,7.88,85,9.09,85,14v8.22H82.51v-7.9c0-2.72-1-4.31-3-4.31a3.35,3.35,0,0,0-3,2.29,4.35,4.35,0,0,0-.2,1.27v8.65H73.74V13.78c0-2.23-1-3.82-2.92-3.82a3.51,3.51,0,0,0-3.15,2.55,3.41,3.41,0,0,0-.2,1.24v8.42H65Z" transform="translate(-8.6 -2.52)"/> <path class="af" d="M90.52,15.63c.06,3.44,2.23,4.86,4.8,4.86a9.1,9.1,0,0,0,3.88-.72l.46,1.82a11.41,11.41,0,0,1-4.69.9c-4.31,0-6.89-2.86-6.89-7.09s2.49-7.52,6.57-7.52c4.6,0,5.79,4,5.79,6.57a6.24,6.24,0,0,1-.09,1.19ZM98,13.81c0-1.59-.67-4.11-3.53-4.11-2.6,0-3.7,2.34-3.91,4.11Z" transform="translate(-8.6 -2.52)"/> <path class="ag" d="M103.6,12c0-1.48,0-2.63-.12-3.79h2.26l.14,2.31h.06a5.19,5.19,0,0,1,4.63-2.6c1.94,0,4.95,1.16,4.95,6v8.33H113V14.1c0-2.26-.84-4.14-3.24-4.14a3.73,3.73,0,0,0-3.59,3.79v8.42H103.6Z" transform="translate(-8.6 -2.52)"/> <path class="ah" d="M122.6,4.81V8.16h3.65V10.1H122.6v7.55c0,1.74.49,2.72,1.91,2.72A4.76,4.76,0,0,0,126,20.2l.12,1.94a7,7,0,0,1-2.26.35,3.63,3.63,0,0,1-2.75-1.07,5.47,5.47,0,0,1-1-3.67V10.1h-2.17V8.16h2.17V5.56Z" transform="translate(-8.6 -2.52)"/> </svg> </object> HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Jul 13, 2016, at 10:01 PM, Crest Christopher <[email protected]> > wrote: > > Here is an example pen <http://codepen.io/Sheep/pen/QEaLrV>; the SVG is being > loaded externally, absolute path in this case. There are classes for each > path within the SVG, I want to stylize the classes individually within the > SVG, not just fill the classes with a path. > > Many of you have posted some good links, even if I've read them, none appear > from my understanding to stylize classes from outside the SVG; I hopefully > want to keep SVG separate from CSS, not intermix the two together within the > SVG file. > >> Tom Livingston <mailto:[email protected]> >> Wednesday, July 13, 2016 4:55 PM >> Updated again. Sorry. My mistake. Just the class is working. >> (I had left the style embedded inside the svg, so using "circle.st0" was >> just more specific.) >> >> Tom Livingston <mailto:[email protected]> >> Wednesday, July 13, 2016 4:50 PM >> Updated to style the circles as well. Have to specify "circle.st0" for this >> to work in chrome. Just the class didn't seem to work. >> >> >> >> Tom Livingston <mailto:[email protected]> >> Wednesday, July 13, 2016 4:34 PM >> It's pretty easy. Blue is done with css in the head. >> >> http://tomliv.com/svg/ >> >> >> Tom Livingston <mailto:[email protected]> >> Wednesday, July 13, 2016 4:18 PM >> >> As opposed to adding an svg using <img src=""> >> >> >> >> Tom Livingston <mailto:[email protected]> >> Wednesday, July 13, 2016 4:17 PM >> On Wed, Jul 13, 2016 at 3:10 PM, Crest Christopher < >> >> He's loading an svg by putting the svg code in the html and providing a >> method of falling back to a png. He is styling the svg with css. >> >> >> > > ______________________________________________________________________ > css-discuss [[email protected]] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
