KPC
Kevin Powell - CommunityAriCohelo

SVGs <use> and not...

Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one of them is not getting the size of the actual svg (image) change it only changes the size of the container. The weird thing is that the two of them are responding to a change of color fill:red but just one is responding of a change of height. Can you figure out why? https://codepen.io/Ari-Cohelo/pen/WNYoBjR?editors=1101
Ari Cohelo
CodePen
Pruebas
...
M
MarkBoots•18d ago
put the viewbox on the <symbol>
C
clevermissfox•18d ago
mark , is it true you dont need the attr xmlns="http://www.w3.org/2000/svg" when using svgs inline in html?
M
MarkBoots•18d ago
I don't use it all the time and never noticed any deficit. But can not say for sure, my svg knowledge is a bit weak (mostly i just copy paste from figma)
M
MarkBoots•18d ago
Okay, so no, not necessary for inline svg inside a html document ref: https://stackoverflow.com/questions/18467982/are-svg-parameters-such-as-xmlns-and-version-needed
No description
ἔρως•18d ago
you shouldn't use the namespace in html and yes, the symbol is missing the viewbox also, make sure that the svg is visually hidden - doing display: none breaks animations on it
M
MarkBoots•18d ago
xmlns == xml Name Space, now it makes sence in my head. will never forget 😉
C
clevermissfox•18d ago
Glad it's clicked for you, it still floats around with ❓️❔️ around it for me 🤣
A
AriCohelo•18d ago
OMFG Thank you!!
Want results from more Discord servers?
Add your server
More Posts
Handling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several realReact + Tailwindcss users? Help with some examples please!I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but Navbar helpi cant get the navbar to go end to end on the pageVS code control panelhey guys does anyone know how can i add source control button in my vs code left panel i tried everyAdding code blocks to websitesI see some websites and blogs like this have these really nicely styled code blocks with syntax highFlexbox column swap without media or container querie.I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution Is there a way to test for css nesting support?I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make<a/> in component return being auto-assigned "button" class somehow, overwriting my classNamesThis is the relevant portion of the return: ``` <ul className="quickLink_list"> <li> creating calculator``` let operatorsArray = document.querySelectorAll('.operator') function bgColor(a){ let bgColLogin Page Improvements/ChangesI'm still learning html and css. What can I improve in my login page? <body> <div class="main-cAnimating outline offsetsIs there a smoother way to animate the offset of an outline? It looks choppy. https://codepen.io/nVertical alignment without wrapper?Problem: https://codepen.io/peendoc/pen/YzMgrwN I want the links to be clickable along the entire heAccessibility with icons/ images in linksHey everyone, I have been looking around with no real luck about the best practice for using svg's aCSS Custom Property Cheat SheetThis is my own cheat sheet for a alternative of Kevin's own oneNeed help with setting "slide-out" animation to a slide-in form.Currently it is working but I'm concerned about the usage of pointer-events as it will be availablt trouble using express.jsi have a js file that im using express.js code using the nodemailer module. What im trying to do is having trouble wrapping my head around mobile menushi all, i really love doing front end work, enjoy really getting into the gritty with SCSS, but my bflow utility issueHey, If I have a div with another div as it's child both utilizing a flow utility with each of theirNeed CSS help to create a container for a list of items (requirements below)Hi all~ I've been trying to create a 2-column list container and am curious if anyone could come up align-content:center does not work!Hi,why align-content :center; does not work in this css code? .parent{ background-color: gray;