Previous Message
Next Message

Style Object tag svg

Sent by Karl DeSaulniers on 14 July 2016 06:06


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-REMOVED]> 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 [EMAIL-REMOVED]>
>> 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 [EMAIL-REMOVED]>
>> 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 [EMAIL-REMOVED]>
>> 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 [EMAIL-REMOVED]>
>> Wednesday, July 13, 2016 4:18 PM
>> 
>> As opposed to adding an svg using <img src="">
>> 
>> 
>> 
>> Tom Livingston [EMAIL-REMOVED]>
>> 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-REMOVED]]
> 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-REMOVED]]
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/
Previous Message
Next Message

Message thread:

Possibly related: