The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Trouble applying css to an svg graphic
Brian Chandler
post Oct 23 2021, 06:05 AM
Post #1


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



Please look at test page: https://imaginatorium.com/test.html
All the (relevant) javascript and css is included.

The top bit is a test of my "Destination"dropdown box.

div: blip is the box containing a bit of Italian and a pink box. It has *position: relative*, which I believe makes it css:positioned. (All css (mis)terminolog preceded thus)

div: blop has a pink background; includes the pulldown triangle at the right. Click this to display the dropdown.

(If you go somewhere else in the shop, like https://imaginatorium.com/aki.html (or if you have visited before) you can enter a destination which will appear in the pink box. "testdrop" is really "destdrop"... name changed to make it independent.)

The dropdown is div:testdrop, which I believe is an immediate child of div:blip. It has position css:absolute, which I believe means relative to the nearest enclosing css:positioned element.

CODE

    /* dropdown menu */
#testdrop {
    position: absolute;
    top: 0px;
    right: 0px;
...


According to everything I have read, this should mean that the dropdown is positioned exactly in the top right corner of div:blip. But it isn't.

But the real problem is the 'X' for closing the dropdown. Any css I apply to the svg itself seems to be ignored. The inspector thingy shows it in the list of css, without any sort of complaint, but refuses to show anything at all about the svg element (the 'X') itself. So I put it inside a div, and applied positioning to this div:

CODE

DIV.svgx {
    position: absolute;
    margin: 0;
    border: none;
    padding: 0;
    height: 12px;
    width: 12px;
    top: 10px;
    right: 10px;
border: solid thin #ff66ff;
}


This seems to be positioned correctly, but the svg element is 12x12 pixels. So why does it occupy a rectangle about 12x20 pixels. (Previously, I did not specify the height of div:svgx, and the div automatically sat around the 'X', with n pixels of padding top and bottom. But the padding is set to 0, as is margin.

Can anyone see why this (div version) is behaving like this, and can anyone tell me why I cannot seem to apply any css to the svg element itself.

Sorry if this seems scrappy: it has taken me something like an hour just to cut all the bits out of various included JS and css files. Grateful for help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 23 2021, 07:47 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE

CODE

    /* dropdown menu */
#testdrop {
    position: absolute;
    top: 0px;
    right: 0px;
...


According to everything I have read, this should mean that the dropdown is positioned exactly in the top right corner of div:blip..



Not if you later tell it to be somewhere else.

CODE
#testdrop {
position : absolute;
top : 0;
right : 0;
display : none;
width : 10em;
font-family : Helvetica, Arial, sans-serif;
border : #ffffff solid 3px;
border-radius : 0.4em;
padding : 0.3em;
color : #ffffff;
background-color : #6060a0;
top : 2.5em;
/*^^^^^^^^^^^^*/
right : 20px;
/*^^^^^^^^^^^^*/
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Oct 24 2021, 12:26 AM
Post #3


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



Thanks Pandy. I must have been tired, and yes that is easily fixed (done!)... but the real question is: why can I not apply css to the svg element as advertised?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 24 2021, 05:52 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You've made div.svgx 20px high. You don't have that in the snip you posted here but in reality you have this.

CODE
DIV.svgx {
    position: absolute;
    margin: 0;
    /* border: none; */
    padding: 0;
    height: 20px;
    top: 10px;
    right: 10px;
    border: solid thin #ff66ff;
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Oct 25 2021, 06:11 AM
Post #5


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(pandy @ Oct 24 2021, 07:52 PM) *

You've made div.svgx 20px high. You don't have that in the snip you posted here but in reality you have this.

CODE
DIV.svgx {
    position: absolute;
    margin: 0;
    /* border: none; */
    padding: 0;
    height: 20px;
    top: 10px;
    right: 10px;
    border: solid thin #ff66ff;
}



This is true, but it doesn't explain anything to me. The svg element is 12px by 12px, so why is it not at the top of the div? When I remove the css:height from the div, the (svg) cross is still somehow positioned about 5px below the top, even though everything I can see has margin and padding zero. Anyway, I made a proper test page, here: https://imaginatorium.com/testsvg.html

My preliminary conclusion would be that CSS simply does not work on svg elements, contrary to what I have read. The only way I can position is by putting a bogus div around it, and positioning the div, but I cannot seem to make the div the same size as the svg. I wonder why not?

On the checkout panel - top right on ordinary pages like: https://imaginatorium.com/masago.html I have positioned the pull-down triangle by putting it inside a flexbox. Perhaps flex really is the answer to everything...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 25 2021, 12:55 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Brian Chandler @ Oct 25 2021, 01:11 PM) *

This is true, but it doesn't explain anything to me. The svg element is 12px by 12px, so why is it not at the top of the div?


What DIV do you mean? You have a number of them. The X is exactly where you've placed it, at the top if its containing block which in this case is div.svgx. And div.svgx is in turn positioned 10px from the top of its containing box, which if I count the DIVs right is div#testdrop.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Oct 25 2021, 02:14 PM
Post #7


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(pandy @ Oct 26 2021, 02:55 AM) *

QUOTE(Brian Chandler @ Oct 25 2021, 01:11 PM) *

This is true, but it doesn't explain anything to me. The svg element is 12px by 12px, so why is it not at the top of the div?


What DIV do you mean? You have a number of them. The X is exactly where you've placed it, at the top if its containing block which in this case is div.svgx. And div.svgx is in turn positioned 10px from the top of its containing box, which if I count the DIVs right is div#testdrop.


It might help if you looked at the "proper" test page: https://imaginatorium.com/testsvg.html

Where I have applied css positioning (or any other style) to the svg element, is is completely ignored. I can position the enclosing (pink) div, but when I do, the cross is not positioned at the top of the div. Here is a picture: Attached Image

Do you see something different? The cross is 12x12 pixels (actually, I think it is 11x11, but makes little difference), and there is a gap between the top of the cross and the enclosing div border, of around 5 pixels. I cannot square this with your description.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 25 2021, 03:32 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I don't understand. Which is the pink DIV? The pink border is on the SVG itself and any gap within that is in the SVG. You can't position the SVG relative itself. But that border is odd. The box should be square, one would think, since height and wiDth is the same, but it's higher than it is wide.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Oct 25 2021, 11:41 PM
Post #9


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(pandy @ Oct 26 2021, 05:32 AM) *

I don't understand. Which is the pink DIV? The pink border is on the SVG itself and any gap within that is in the SVG. You can't position the SVG relative itself. But that border is odd. The box should be square, one would think, since height and wiDth is the same, but it's higher than it is wide.


"The enclosing div" means the div enclosing the svg element; in box N, if this is present it has id=svgN. This div has a pink border (#ff66ff), and no svg element has a border this colour, so your claim about the gap being in the SVG seems to be simply wrong.

Of course in English you can't position anything relative to itself, because the answer would always be (0, 0), but css-relative means "position with an offset from your original position". AIUI, generally "position:relative" is used to have no positioning effect, but to make this element the reference, so that any "css-absolute" positioning is relative to this element.

But the border, indicating the position of the DIV is indeed odd. If you poke around in the inspector the svg element is shown as being 12x12, then the enclosing div is (about) 20px high, despite all relevant margins and padding being zero.

Since last night, I thought about boxes not being positioned properly, and remembered that it is usually because the default is "display:inline", so all elements have a gap at the bottom for their (counterfactual) descenders. So I added "SVG {display: block}" with high hopes, but it made no difference.

Perhaps the next thing to try is the "flex for everything" strategy...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 26 2021, 12:45 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yes, you are right. I got confused by the different threads and misread. The SVG has a white border. I wonder if I misread more things, because now I can't see the SVG is positioned at all. And div.svg doesn't have a width as I thought it did. Or have you changed things? wacko.gif

Anyway, if I add 'position: absolute; top: 0; right: 0' to the rule for svg.svgx and a width for div.svgx (so it doesn't collapse) it works. There is no gap between the white an pink border that I can see.

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 26 2021, 01:07 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I only used the inspector, but when I look at the source I see you do have the positioning in your CSS, but it's commented out.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Oct 26 2021, 12:26 PM
Post #12


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(pandy @ Oct 26 2021, 02:45 PM) *

Yes, you are right. I got confused by the different threads and misread. The SVG has a white border. I wonder if I misread more things, because now I can't see the SVG is positioned at all. And div.svg doesn't have a width as I thought it did. Or have you changed things? wacko.gif

Anyway, if I add 'position: absolute; top: 0; right: 0' to the rule for svg.svgx and a width for div.svgx (so it doesn't collapse) it works. There is no gap between the white an pink border that I can see.


Thanks for looking at this, Pandy. I copied your semi-successful details to box 1 on the "proper" test page: https://imaginatorium.com/testsvg.html ...
Here's my main finding: I get completely different results in FF and Chromium, so the basic method is useless. (20 years have been spent on this...)

Actually, box 5, in which I apply the style to the svg by including it in an id div, then using "DIV#id SVG" does work in Chromium, but not at al in FF.

But using flex seems to be the answer, because the positioning is applied "from outside", as it were; the browser doesn't really care what is inside the flex item, it just positions the box. Bizarrely though this also manages to apply the other styling (border and background) to the svg element. Box 3 is my first attempt, just including two crosses within a "spaced out" flexbox, then box 4 is the real thing.

Incidentally there is a curious flaw, because of a silly mistake I made. If you have a 12x12 px raster image, and pixel manipulating software, then the coordinates go from (0, 0) top left to (11,11) bottom right. But svg does not have pixels, so the coordinates of a 12x12 px image go from (0, 0) top left to (12,12) bottom right!

I think that css is - by a very long way - the most bungled software project in the history of computing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 26 2021, 03:06 PM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



OK, lets leave it at that then.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 26 2021, 05:53 PM
Post #14


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Brian,

I didn't look closely at the linked pages, but a simple test should demonstrate that SVG elements can indeed be styled...

CODE
svg {
border: solid #000;
position: absolute;
top: 0;
left: 0;
background: #f00;
}
polygon {fill: #fff;}


<svg width="12" height="12">
    <polygon points="1,0 11,10 10,11, 0,1" />
    <polygon points="10,0 11,1 1,11, 0,10" />
</svg>

When I try out new things I usually experiment on an otherwise empty test page, and only after that migrate the sub-assembly to an existing page template.

Also I moved the POLYGON "fill" color styling to the stylesheet (instead of using inline styles), so that I can keep the SVG's foreground and background colors specified as close together as possible in the code.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Oct 30 2021, 11:51 AM
Post #15


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



Thanks to both of you for looking at this. Basically I have found I can do it using flex for "positioning from outside", and have a website to get working, so this is what I will do.

But I was slightly intrigued by Christian's example, so I copied it to https://imaginatorium.com/testcj.html where it works. I changed the position from (0,0) because otherwise it can't be distinguished from just being top left by default.

To copy this into any real page the styles have to be by id or class, so I made the minimum changes I could, and then copied into the top of https://imaginatorium.com/testsvg.html - where of course it doesn't work. Well, the background style works but the positioning does not. If you can point out any obvious difference to something else it might help.

Incidentally, I found the problem with serving a standalone svg; you have to have the bit of babble for the namespace (xmlns=[reference to webpage]). In a piece of unimaginably tortuous logical confusion, this web page claims that the address of this web page is actually the thing described by this web page, even though it seems to have no other form of existence. I am not impressed.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 30 2021, 04:28 PM
Post #16


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Oct 30 2021, 06:51 PM) *

But I was slightly intrigued by Christian's example, so I copied it to https://imaginatorium.com/testcj.html where it works. I changed the position from (0,0) because otherwise it can't be distinguished from just being top left by default.

Actually it's not working, since units are missing for the top and left values. The little gap you can see is the BODY margin.

QUOTE
To copy this into any real page the styles have to be by id or class, so I made the minimum changes I could, and then copied into the top of https://imaginatorium.com/testsvg.html - where of course it doesn't work. Well, the background style works but the positioning does not. If you can point out any obvious difference to something else it might help.

Units are missing here as well.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Nov 21 2021, 02:51 PM
Post #17


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(Christian J @ Oct 31 2021, 06:28 AM) *

QUOTE(Brian Chandler @ Oct 30 2021, 06:51 PM) *

But I was slightly intrigued by Christian's example, so I copied it to https://imaginatorium.com/testcj.html where it works. I changed the position from (0,0) because otherwise it can't be distinguished from just being top left by default.

Actually it's not working, since units are missing for the top and left values. The little gap you can see is the BODY margin.

QUOTE
To copy this into any real page the styles have to be by id or class, so I made the minimum changes I could, and then copied into the top of https://imaginatorium.com/testsvg.html - where of course it doesn't work. Well, the background style works but the positioning does not. If you can point out any obvious difference to something else it might help.

Units are missing here as well.


I'm a bit puzzled by this - which units do you mean are missing? Not, surely, in <svg class="cj" width="12" height="12">, where as best I can understand it the numbers are the range of coordinates in SVG space, and these are just numbers, not (for example) pixels... ??
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 21 2021, 08:26 PM
Post #18


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



In the CSS:

CODE
top: 20;
left: 20;

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:03 PM