Re: [css-d] Style Object tag svg

> Crest Christopher > Thursday, July 14, 2016 10:23 AM > Following the jQuery method, I assume I can keep the tag ? > > The SVG loads via the tag, then though the help of the > script, I stylize the classes within the SVG as such > > |#word.pavement .ab { >

Re: [css-d] Style Object tag svg

Um I didn't ask a question, but I am glad you figured it out. Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Jul 14, 2016, at 8:37 AM, Crest Christopher > wrote: > > You can, you answered your own question, what I already found out.

Re: [css-d] Style Object tag svg

Following the jQuery method, I assume I can keep the tag ? The SVG loads via the tag, then though the help of the script, I stylize the classes within the SVG as such |#word.pavement .ab { fill:red; rotate(12deg); } | The class .ab is within the SVG file ? > Rick Gordon

Re: [css-d] Style Object tag svg

> 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. You can, you answered your own question, what I already found out. > I think the reason jQuery can do it is because jQuery accesses the > inline tag after

Re: [css-d] Style Object tag svg

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

Re: [css-d] Style Object tag svg

I think the reason jQuery can do it is because jQuery accesses the inline 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

Re: [css-d] Style Object tag svg

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

Re: [css-d] Style Object tag svg

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

Re: [css-d] Style Object tag svg

I did get your link a few posts back. I suppose jQuery is the only solution, otherwise vanilla css and svg segregated is not possible. Thanks Rick. > Rick Gordon > Thursday, July 14, 2016 12:20 AM > The link that I posted earlier, >

Re: [css-d] Style Object tag svg

Here is an example pen ; 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

Re: [css-d] Style Object tag svg

Anyone know if CodePen can display absolute SVG files, I'm getting a parsing error ? Tom Livingston 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

Re: [css-d] Style Object tag svg

It requires the SVG to be embedded into the markup; I suppose id> is my only solution. I have SVG with too many paths that will add too much overhead to the markup. Tom Livingston Wednesday, July 13, 2016 4:55 PM Updated again. Sorry. My mistake. Just the class is

Re: [css-d] Style Object tag svg

On Wed, Jul 13, 2016 at 4:50 PM, Tom Livingston wrote: > > > On Wed, Jul 13, 2016 at 4:34 PM, Tom Livingston wrote: > >> It's pretty easy. Blue is done with css in the head. >> >> http://tomliv.com/svg/ >> >> >> -- >> >> > Updated to style the circles as

Re: [css-d] Style Object tag svg

On Wed, Jul 13, 2016 at 4:34 PM, Tom Livingston wrote: > It's pretty easy. Blue is done with css in the head. > > http://tomliv.com/svg/ > > > -- > > 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

Re: [css-d] Style Object tag svg

It's pretty easy. Blue is done with css in the head. http://tomliv.com/svg/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss

Re: [css-d] Style Object tag svg

On Wed, Jul 13, 2016 at 3:10 PM, Crest Christopher < crestchristop...@gmail.com> wrote: > I have a question regarding this > > method; there is no SVG being loaded, is it loading in the background and > simply

Re: [css-d] Style Object tag svg

On Wed, Jul 13, 2016 at 4:17 PM, Tom Livingston wrote: > > > On Wed, Jul 13, 2016 at 3:10 PM, Crest Christopher < > crestchristop...@gmail.com> wrote: > >> I have a question regarding this >>

Re: [css-d] Style Object tag svg

I have a question regarding this method; there is no SVG being loaded, is it loading in the background and simply being stylizing by a style sheet ? Tom Livingston Tuesday, July

Re: [css-d] Style Object tag svg

-d@lists.css-discuss.org<mailto:css-d@lists.css-discuss.org>> Subject: Re: [css-d] Style Object tag svg I only said, it was a post to make it easier to find I understand it meant; likes. you can only set the properties for the entire symbol with this method. So, if you have two paths in

Re: [css-d] Style Object tag svg

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS On Tuesday, July 12, 2016, Crest Christopher wrote: > I only said, it was a post to make it easier to find I understand it > meant; likes. > >you can only set the properties for

Re: [css-d] Style Object tag svg

I only said, it was a post to make it easier to find I understand it meant; likes. you can only set the properties for the entire symbol with this method. So, if you have two paths in your symbol and want them to have different fill colors, this won't work, but if you want all your

Re: [css-d] Style Object tag svg

1) That's not "post 16" that's a reply with 16 (now 17) likes. 2) Is explicitly says in the example: On 7/12/16, 7:30 AM, "css-d-boun...@lists.css-discuss.org on behalf of Crest Christopher" wrote: >Look at, post

Re: [css-d] Style Object tag svg

Stu Graham - Linnets wrote: > > > Hi, > > Please can you remove me from this mailing list now. > List-Unsubscribe: , >

Re: [css-d] Style Object tag svg

Hi, Please can you remove me from this mailing list now. Thanks Stu STUART GRAHAM | RUNCORN LINNETS JUNIOR FOOTBALL CLUB - E: stuart.gra...@runcornlinnetsjfc.co.uk W: www.RuncornLinnetsJFC.co.uk [7] M: +44(0) 7903 950 318 - _"HELP

Re: [css-d] Style Object tag svg

Look at, post 16 on stack overflow ? The example SVG file doesn't have a class called fill-red or fill-blue, how is it being stylized ? Rick Gordon Monday, July 11, 2016 8:32 PM Is this any help?

Re: [css-d] Style Object tag svg

A condition, what if I don't want to use strictly just style the SVG; it should work ? Tom Livingston Monday, July 11, 2016 9:31 PM On Mon, Jul 11, 2016 at 9:26 PM, Crest Christopher< crestchristop...@gmail.com> wrote: It looks promising until put into use,

Re: [css-d] Style Object tag svg

On Mon, Jul 11, 2016 at 9:26 PM, Crest Christopher < crestchristop...@gmail.com> wrote: > It looks promising until put into use, without using foreignObject as it's > a condition; rather strictly using then targeting the SVG by > simply > > SVG { > color: red /* or */ > border: solid 4px red; >

Re: [css-d] Style Object tag svg

It looks promising until put into use, without using foreignObject as it's a condition; rather strictly using then targeting the SVG by simply |SVG { color: red /* or */ border: solid 4px red; } | Nothing happens ? Tom Livingston Monday, July 11, 2016 8:57 PM

Re: [css-d] Style Object tag svg

Can't the svg code be put on the page without the use of ? 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

Re: [css-d] Style Object tag svg

Is this any help? http://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css - On 7/9/16, 8:24 PM, Crest Christopher wrote: I've been searching on how I can style SVG files embedded in a tag, including CSS animation. Can someone point me in the

Re: [css-d] Style Object tag svg

.class #svg-object body ? Karl DeSaulniers 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

Re: [css-d] Style Object tag svg

What container are you referring too ? Karl DeSaulniers 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

Re: [css-d] Style Object tag svg

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,

Re: [css-d] Style Object tag svg

I'm going to test, now I can. Karl DeSaulniers 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

Re: [css-d] Style Object tag svg

You could stylize the classes within the SVG individually as well ? Karl DeSaulniers 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

Re: [css-d] Style Object tag svg

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

Re: [css-d] Style Object tag svg

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

Re: [css-d] Style Object tag svg

And I still don't see a link. Just references to line numbers and code. On Sunday, July 10, 2016, Karl DeSaulniers wrote: > I'm getting 4 emails every time you post Crest. Please prune your send to > addresses. Or at very least delete my email. > > Thanks, > Karl > > Sent

Re: [css-d] Style Object tag svg

I'm getting 4 emails every time you post Crest. Please prune your send to addresses. Or at very least delete my email. Thanks, Karl Sent from losPhone > On Jul 10, 2016, at 10:06 AM, Crest Christopher > wrote: > > Any more suggestions, it's pretty common

Re: [css-d] Style Object tag svg

I'm with Karl. Need a link. On Sunday, July 10, 2016, Crest Christopher wrote: > 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

Re: [css-d] Style Object tag svg

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

Re: [css-d] Style Object tag svg

I think a link to a live example would be best here. Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Jul 10, 2016, at 9:51 AM, Crest Christopher > wrote: > > Tom, I read the second page you linked too as well. > > I tried, considering the ID is

Re: [css-d] Style Object tag svg

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.

Re: [css-d] Style Object tag svg

Might need to be this to cover all systems or the embed may be a Flash thing only, not sure. No time to look into it. div#svgid object, div#svgid embed { border: 1px solid #cfcfcf; } HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Jul 9, 2016, at 11:26 PM,

Re: [css-d] Style Object tag svg

Hi Crest, Will this work? div#svgid object { border: 1px solid #cfcfcf; } Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Jul 9, 2016, at 10:24 PM, Crest Christopher > wrote: > > I've been searching on how I can style SVG files

Re: [css-d] Style Object tag svg

I read the entire one article on SVG and the tag from Saras page; but it doesn't tell me how I can style id or classes by a embedded style sheet or external; she goes into viewbox and javascript and data tag etc. Tom Livingston Saturday, July 09, 2016 11:42 PM

Re: [css-d] Style Object tag svg

Google Sara Soueidan. She's very knowledgeable on SVG. On Saturday, July 9, 2016, Crest Christopher wrote: > I've been searching on how I can style SVG files embedded in a > tag, including CSS animation. > > Can someone point me in the direction, how I can