Previous Message
Next Message

Style Object tag svg

Sent by Karl DeSaulniers on 11 July 2016 03:03


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




> On Jul 10, 2016, at 9:52 PM, Crest Christopher [EMAIL-REMOVED]> wrote:
> 
> 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/
>> Chris Williams [EMAIL-REMOVED]>
>> Sunday, July 10, 2016 2:35 PM
>> It's not clear to me exactly what the question is.
>> 
>> Can you style SVG inside divs on a page? Yes, I've done it frequently.
>> 
>> How? Simple, and like every other CSS case: use a debugger (Chrome, FF, IE) and look at the
object structure, figure out the hierarchy you want/need and go for it.
>> 
>> Do I have to use jQuery? No. If you want to get fancy, you might have to use JavaScript, but that
doesn't mean you have to use jQuery (and all it's weight). The JS isn't that complex.
>> 
>> 
>> 
>> 
>> ______________________________________________________________________
>> 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 11:06 AM
>> Any more suggestions, it's pretty common question but I want to do it, hopefully, with strictly
CSS; every site I find related to the subject either explains a jQuery solution or it's clear, or
not clear at all on a solution, as I'll be using this, if I can find, solution quite often.
>> 
>> 
>> Karl DeSaulniers [EMAIL-REMOVED]>
>> Sunday, July 10, 2016 10:55 AM
>> I think a link to a live example would be best here.
>> 
>> 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:51 AM
>> Tom, I read the second page you linked too as well.
>> 
>> I tried, considering the ID is within a class; .className #svg-object: 12px solid red. There is
no red border around my SVG object.  Even if it worked, I want to access the path classes or id
within the SVG and style outside of the SVG file.
>> 
>> 
> 
> ______________________________________________________________________
> 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: