Previous Message
Next Message

Style Object tag svg

Sent by Karl DeSaulniers on 14 July 2016 06:06


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 [EMAIL-REMOVED]> 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 [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/

______________________________________________________________________
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: