Previous Message
Next Message

Style Object tag svg

Sent by Crest Christopher on 12 July 2016 02:02


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 ?

> 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 ?
>
>
> Karl DeSaulniers [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/

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