Previous Message
Next Message

Style Object tag svg

Sent by Karl DeSaulniers on 14 July 2016 06:06


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