FYI, I found this answer using Rick Gordons link — http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css
The answer by RGB edited by Paul D. Waite Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Jul 14, 2016, at 12:23 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > I think the reason jQuery can do it is because jQuery accesses the inline > <svg> tag after its been loaded into the DOM. > > So to answer your question, can you style a SVGs children via the parent > documents css that are linked and not embedded, the answer is no. > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > >> On Jul 14, 2016, at 12:20 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: >> >> Also, you will need to include the "embed tag" like you do with a flash file >> for it to work on all systems I believe. >> So one suggestion I have is to put your SVG inline code in their own >> separate html and inject them at runtime into your object and embed tags >> with PHP or the like. >> IF you really want to control them with the parent css. >> >> The easiest way seems to be to use the style tag inside the SVG. >> I am not sure how to access that when creating your SVG. Hadn't gone that >> far. >> >> GL! >> >> Best, >> >> Karl DeSaulniers >> Design Drumm >> http://designdrumm.com >> >> >> >> >>> On Jul 14, 2016, at 12:13 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: >>> >>> 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 >>>> <crestchristop...@gmail.com> 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:tom...@gmail.com> >>>>> 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:tom...@gmail.com> >>>>> 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:tom...@gmail.com> >>>>> 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:tom...@gmail.com> >>>>> Wednesday, July 13, 2016 4:18 PM >>>>> >>>>> As opposed to adding an svg using <img src=""> >>>>> >>>>> >>>>> >>>>> Tom Livingston <mailto:tom...@gmail.com> >>>>> 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 [css-d@lists.css-discuss.org] >>>> 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 [css-d@lists.css-discuss.org] >>> 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 [css-d@lists.css-discuss.org] >> 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 [css-d@lists.css-discuss.org] > 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 [css-d@lists.css-discuss.org] 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/
