Previous Message
Next Message

Style Object tag svg

Sent by Crest Christopher on 12 July 2016 02:02


A condition, what if I don't want to use <foreignObject> strictly just 
style the SVG; it should work ?

> Tom Livingston [EMAIL-REMOVED]>
> Monday, July 11, 2016 9:31 PM
> On Mon, Jul 11, 2016 at 9:26 PM, Crest Christopher<
> [EMAIL-REMOVED]>  wrote:
>
>> It looks promising until put into use, without using foreignObject as it's
>> a condition; rather strictly using<switch>  then targeting the SVG by
>> simply
>>
>> SVG {
>> color: red /* or */
>> border: solid 4px red;
>> }
>>
>> Nothing happens ?
>>
>
> Might wanna read that stuff again. "foreignObject" was just a way to add a
> fallback.
>
>
>
>
>> Tom [EMAIL-REMOVED]>
>> Monday, July 11, 2016 8:57 PM
>> Can't the svg code be put on the page without the use of<object>?
>>
>> I came across this:
>>
>> http://thoughtfulweb.com/thoughts/on/the-best-way-to-add-an-svg-image-to-your-website
>>
>> and it mentions putting the svg code inline and that this is how you can
>> target it with css...
>> "The first important thing to note is the SVG is inline. If the SVG is not
>> inline then you can not target it with CSS."
>> that seems more straight forward and logical to me.
>>
>>
>> On Mon, Jul 11, 2016 at 7:35 PM, Crest Christopher<
>>
>>
>> Crest [EMAIL-REMOVED]>
>> Monday, July 11, 2016 7:35 PM
>> .class #svg-object body<class of path in svg>  ?
>>
>>
>> Karl [EMAIL-REMOVED]>
>> Sunday, July 10, 2016 10:58 PM
>> if your talking about styling the contents of the object tag, you would
>> have include the body tag of the object tag kind of like an iframe.
>>
>> .styleclass #svgobj body .childelementclass #childelement
>>
>> Best,
>>
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>>
>>
>>
>>
>>
>> ______________________________________________________________________
>> 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/
>> Crest [EMAIL-REMOVED]>
>> Sunday, July 10, 2016 10:52 PM
>> You could stylize the classes within the SVG individually as well ?
>>
>>
>> Karl [EMAIL-REMOVED]>
>> Sunday, July 10, 2016 10:50 PM
>> Crest,
>> I was successful at styling your svg (that isn't loading btw).
>>
>> Firstly, Your using display inline on everything. When you use
>> display:inline, width and height do not get computed correctly.
>> so your object is collapsing to 0px. change to inline-block
>>
>> Secondly, you have visibility: hidden on the container element. You wont
>> see any styling if this is set.
>>
>> I am not going to share my code since you said you wanted to do this
>> yourself,
>> but I can tell you for certain your svg object can be styled.
>>
>> GL!
>>
>> Best,
>>
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>>
>>
>>
>>
>>
>> ______________________________________________________________________
>> 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/
>>
>>
>>
>
>
> Tom Livingston [EMAIL-REMOVED]>
> Monday, July 11, 2016 8:57 PM
> Can't the svg code be put on the page without the use of <object>?
>
> I came across this:
> http://thoughtfulweb.com/thoughts/on/the-best-way-to-add-an-svg-image-to-your-website
>
> and it mentions putting the svg code inline and that this is how you can
> target it with css...
> "The first important thing to note is the SVG is inline. If the SVG is not
> inline then you can not target it with CSS."
> that seems more straight forward and logical to me.
>
>
> On Mon, Jul 11, 2016 at 7:35 PM, Crest Christopher <
>
>
> Crest Christopher [EMAIL-REMOVED]>
> Monday, July 11, 2016 7:35 PM
> .class #svg-object body <class of path in svg> ?
>
>
> Karl DeSaulniers [EMAIL-REMOVED]>
> Sunday, July 10, 2016 10:58 PM
> if your talking about styling the contents of the object tag, you 
> would have include the body tag of the object tag kind of like an iframe.
>
> .styleclass #svgobj body .childelementclass #childelement
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
>
> ______________________________________________________________________
> 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/
> Crest Christopher [EMAIL-REMOVED]>
> Sunday, July 10, 2016 10:52 PM
> You could stylize the classes within the SVG individually as well ?
>
>

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