Issue Trying to use angular ng-class with d3js library on an svg element, without luck. HTML <div ng-controller=”MainCtrl”> <div id=”svgContainer”></div> <button id=”swicthBtn” ng-click=”switchStatus();” class=”btn”>Switch status</button> </div> CSS *, *:before, *:after { bounding-box: border-box; } #svgContainer { width: 400px; height: 400px;
Continue readingTag: svg
Converting SVG to PNG using C#
Issue I’ve been trying to convert SVG images to PNG using C#, without having to write too much code. Can anyone recommend a library or example code for doing this? Solution You can call the command-line version of inkscape to
Continue readingConverting SVG images to base64 PNG with browser
Issue I’m trying to convert a bunch of siblings SVG images to base64 PNG strings, using just the browser and plain Javascript, but for some reason beyond my knowledge I get the base64 PNG string of only the last SVG.
Continue readingHow to convert png image to inline svg
Issue How to convert png image to inline svg, by inline svg I mean the html tags paths, polygons, rects, circle etc I dont want the svg file as I want to apply css to these elements. Thanks Solution You
Continue readingRendering React SVG Components as images (using DATA URI)
Issue Hi to optimize my huge svg components I’m tryin to do something similiar to this tutorial: https://medium.com/@ians/rendering-svgs-as-images-directly-in-react-a26615c45770 , so far I’ve come up with this import React from ‘react’; import { renderToStaticMarkup } from ‘react-dom/server’ function Image({children}) { let
Continue readingangular dom sanitizer and svg byte array
Issue I am trying to bind a byte array to an image tag in angular. I know the byte array is correct, because I can download it and view it from my API. I created an image like this: <img
Continue readingHow to style SVG with external CSS?
Issue I have several SVG graphics I’d like to modify the colors of via my external style sheets – not directly within each SVG file. I’m not putting the graphics in-line, but storing them in my images folder and pointing
Continue readingSVG linear gradient doesn't work on other elements
Issue I created an SVG logo and want to animate it inside a React component. In my SVG I have 3 different gradients: green, orange, and red. I noticed that when I’m trying to assign a gradient via className to
Continue readingMake circle on same image
Issue I am using below image. Now I want to clickable all circle. This is a simple image. Every circle will redirect to different different links. Is this possible? Solution Html image maps may be the fitting tool. Conceptually the
Continue readingHow to enlarge the SVG icon in material-ui iconButtons?
Issue Has anyone build webpages using react.js and the Material UI library? How should I resize the icon size? It is a svg icon. I just built an “create new” component, which is a piece of material paper with a
Continue readingConvert code from canvas to svg
Issue I have a code in canvas which help me in making gas triangles(duval triangles). I need to convert the code from canvas to svg. One of the reason why I moving from canvas to svg, is because I can’t
Continue readingHow to scale resize SVG contents proportionally, using only CSSs?
Issue How can I scale or resize inline SVG vector artwork, using only CSS, so all artworks resize proportionally and fit fully into their defined width & height? The original aspect-ratio should be respected. In this case I would like
Continue readingHow to change ::marker SVG color in CSS?
Issue I have an SVG li::marker, and I would like to change the color depending on the font color. I was thinking to use it like this, where I put fill="currentColor" but this is not working. How could I fix
Continue readingHow to stop SVG breaking CSS grid layout?
Issue Whenever I insert SVG into my grid layout it 1) doesn’t center, and 2) breaks the layout of the grid. How do I fix this please, so that the play icon shows in the same way the play text
Continue readingSVG stroke-linecap at one end only
Issue Is it possible to add a linecap to only one end of a stroke? Not both ends as is the default shown in the sample below. <?xml version=”1.0″?> <svg width=”120″ height=”120″ viewBox=”0 0 120 120″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg”> <line stroke-linecap=”butt”
Continue readingAdd a hovering effect on an element with masked or backround SVG Icon
Issue How do I add an hovering effect on an element that serves as an SVG Icon that can also change the color of the icon itself. This is what I have right now, two option, using a mask image
Continue readingmy SVG (donnut chart) doesn't display correctly on IOS
Issue Context : I want to display a donut chart using one SVG composed of two circles : Both circles are dynamically filled with a css variable (as a percent). Everythings works fine on PC and Android (chrome). When viewing
Continue readingIMG tag in svg is not working when only id and class is provided
Issue The HTML code below shows the HTML code where I am using SVG to display pictures and then polygons on the pictures and this is done with D3 using image pagination. Somehow the images are displayed if I am
Continue readingSVG pause/play Can not figure out why this isn't working…?
Issue I need code to work just like on this page. Play and pausing of an SVG. I went into inspect and pulled all the code I could, which seemed to be HTML. I could not see or find CSS
Continue readingSVG Error: <path> attribute d: Unexpected end of attribute
Issue I’m getting a browser console error from an SVG path. I’m not sure how to fix this, or which part of the path is incorrectly configured (I didn’t make the path). Error: <path> attribute d: Unexpected end of attribute.
Continue readingHow do I use a .svg image as a HTML icon?
Issue I have some .svg images and I want to use then as icon in my webpage. Is there any way to do this with the <i> tag? Solution I’ve solved my problem adding the svg code of the image
Continue readingJavaScript/HTML – SVG Arrowhead not showing up on line element
Issue I want to create a line with an arrowhead. The line element is contained in a group container in an SVG. I’m using the following code to add the arrow head definition to the SVG. var defs = document.createElementNS("http://www.w3.org/2000/svg",
Continue readingIs it possible to match SVG height to parent so that it acts like background 'cover'?
Issue I have an SVG Pattern imported as a reacted component rendered inside a parent container. I want the pattern to act like background-image : ‘cover’ inside the parent container but I’m not sure how to go about it. Currently
Continue readingAccess SVG data from URL returned in fetch API call
Issue I’m using an API call to return an SVG but the request is returned as url of the SVG, I need to edit the SVG colors but cannot access the SVG inline data. This url will be different with
Continue readingHow to make the patterns of a pie chart parallel to the center line of sectors in d3.js?
Issue I created a pie chart filled with patterns. I want to make the pattern parallel to the center line of the sector it is in. I tried to change the patternTransform parameter to rotate the pattern, but I do
Continue readingHow to "transform: scale()" from the center of the path?
Issue I want to increase the scale of the segments on hover, while keeping their original position what would look like "increasing the stroke width" (what isn’t the way it should work, because i want the whole path consist of
Continue readingWordPress CSS and Inline SVG
Issue I’m trying to use a the clip-path property for an image, and to make it fully compatible with Firefox I need to inline the SVG clipping path and then refer to it in the CSS file using its ID
Continue readingHow to fill the svg by using it as background for after selector?
Issue How can I change the fill color dynamically for the background-image inside of section::after. I tried with class name but that does not work. body { position: relative; width: 100%; margin: 0; padding: 0; color: #fff; } section {
Continue readingDomPDF not showing encoded svg in img tag on Windows IIS 10
Issue Lately I’ve developed a Laravel application that generates a PDF, the development process was made in ubuntu 21.10 using laravel sail, and it has been deployed to a Windows Server with IIS 10. The PDF contains an image that
Continue readingHow to pause and run just one SMIL animation in svg?
Issue I have an SVG that has two SMIL animations. I want to control just the animations for one path (has id="poi_front" for the group) by pausing and running them using buttons, and let the animations for the other SVG
Continue readingTransparent text cut out of background
Issue Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS? It would be sad to lose all precious SEO because of images replacing text. I
Continue readingCustom svg admin menu icon in WordPress
Issue I’m really counting on your help in this one. I searched a lot and found no solution. I want to have a custom icon for my plugin in admin menu, and I want it to integrate well with the
Continue readingMask-composite for svg path subtract
Issue I am working with a svg material which contains two paths, one solid green with gap inbetween and one dashed red with no gap inbetween Red Dashed <svg viewBox=”0 0 1200 100″> <path id =’lineNoGap’ d=”M0,80L50,20L100,50L150,30L200,40L250,90L400,20L450,70L500,60″ stroke=”red” fill=”none” stroke-dasharray=”2″
Continue readingSeparate parts of an svg file
Issue Does anyone know if I can separate each of the objects that the image has from an SVG file? Thank you Solution If the SVG is embed directly you can select each element/path object for styling/changes. If the SVG
Continue readingIssues with SVG objects on Mobile
Issue I have tried everything but I think I’m just a bit over my head here. I have created a site that on desktop works perfectly, but, on mobile, the hover elements just will not work. I’m using SVG Objects.
Continue readingImg src doesn't render SVG in Angular
Issue I have SVG file coming from backend and when I try to display it in frontend angular(v11) app it doesn’t render and looks broken here is my code.. <div fxLayout="column" *ngFor="let svgFile of activePageDataChunk"> <img src="data:image/svg+xml,svgFile"> this is how
Continue readingProblems with SVG styling
Issue I have an SVG and i’m trying to do 2 things. I wanted to center it in the .left div, i tried to use: Display:flex; Justify-content: center; Align-items: center; text-align: center; display: block; margin: auto; none of them worked
Continue readingRe-Center text position as str length changes
Issue I am new to javascript and am having an issue repositioning animated text as the string length varies. I have an SVG element and a string within it, where that string needs to be centered within that SVG. Using
Continue readingSVG: generate increasing numbers on grid
Issue So basicly I have a grid that is using parrerns of paths/rects to draw the grid. On this grid I want to put numbers in x & y direction. Like a coordinate system you might know from school. I
Continue readingSVG content is not displaying in the page
Issue All content from the HTML below is displaying in the page properly except the SVG content. Do I need to use any different tag to display it? Please help me with that. I need to display it in the
Continue readingHow to rotate svg circle in place?
Issue I’m trying to make this icon rotate like this: https://www.youtube.com/watch?v=Y61pjmWLSn8 At the moment the icon is moving all over the place. How can i make the icon rotate like the video? path { transform-origin: 50px 50px; animation-duration: 3s; animation-name:
Continue readingSVG elements font-size change specifically on MacBook Firefox
Issue This is weird because I have another Mac desktop, and firefox (same version I guess) and there is no problem. Only on my MacBook. On my web-game, I have 4 buttons: "Play" : "Cars" : ‘Multiplayer" : "Download" The
Continue readingI have gone through many posts saying "to add multiple animations, we can add them just by using commas(,)" but, in my case, its not happening
Issue #box{ animation:moving-box 20s linear infinite, box-rotation 20s linear infinite; transform-origin: center; } @keyframes box-rotation{ from{ transform: rotateZ(0deg); } to{ transform: rotateZ(360deg); } } @keyframes moving-box { 0%{ transform: translateX(-40%); } 50%{ transform: translateX(40%); } 100%{ transform: translateX(-40%); } }
Continue readingHow to draw grid using HTML5 and canvas or SVG
Issue I want to draw a grid as shown in the image but I totally don’t have any idea where to begin. Should I use SVG or should I use Canvas with HTML5 and how do I draw on it?
Continue readingHow can I move an SVG mask to show a shape that is initially hidden?
Issue I’m trying to create an animation like the one in this gif : Here is my HTML/SVG/CSS : <!DOCTYPE html> <html> <head> <title>svg animation logo</title> <style> path, line, circle { fill: none; stroke: #164a07; stroke-width: 4; } svg {
Continue readingsvg outline and fill
Issue I have an svg of a heart with a black outline. I am interested in changing the outline to a red path, and then programmatically once it is clicked, I would like to fill the heart completely red. Similar
Continue readingmultiple rect in an svg?
Issue I expect rect is like div where’s display block? <svg width=”400″ height=”180″> <rect width=”150″ height=”150″ style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ /> <rect width=”150″ height=”150″ style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ /> </svg> but it will overlap each other. How to make another rect and wrap it within one
Continue readingWhy CSS animation (rotate) does not work in iOS 15.4
Issue I have an SVG icon and I have applied some CSS animation (rotation) to it, using inline CSS inside the SVG file (below you can see my code and run the snippet). My problem is that, although the animation
Continue readingHTML5 Canvas vs. SVG vs. div
Issue What is the best approach for creating elements on the fly and being able to move them around? For example, let’s say I want to create a rectangle, circle and polygon and then select those objects and move them
Continue readingJavascript to dynamically select based on another query
Issue I am working with a svg element as following const src = [{ “Name”: “Australia”, “Year”: 1997, “Value”: 15.540540540540499 }, { “Name”: “Australia”, “Year”: 1998, “Value”: 15.540540540540499 }, { “Name”: “Australia”, “Year”: 1999, “Value”: 22.4489795918367 }, { “Name”: “Brunei”,
Continue readingError: <svg> attribute height: Expected length, "NaN"
Issue I am trying to generate some Pie charts with Angular Charts, but when I build the app I keep getting the errors: Error: attribute height: Expected length, “NaN” Error: attribute transform: Trailing garbage, “translate(60,NaN)” I have tried everything but
Continue readingd3.v3.min.js:1 Error: <svg> attribute height: Expected length, "NaN" while loading a d3 chart in a modal popup
Issue I have been trying to load a bigger size chart in modal popup onClick of smaller chart . I have made the chart responsive by resizing it’s viewbox . But the issue i am now facing is that the
Continue readingHow to create a staggered square tiling pattern in svg?
Issue I want to fill a rectangle space with a repeating image pattern. The images are arranged in a staggered square tiling. Two adjacent rows are staggered in the x-direction by half the width of the side of the square.
Continue readingAligning an SVG inline with text
Issue I have the following JSFiddle where an SVG is placed on the left to some text inside a button. I would like the SVG to be inline with the text so that it is vertically positioned in the button.
Continue readingResize SVG on Mobile
Issue How can I resize my SVG Logo for responsiveness on Mobile? Here’s my Fiddle and my code is below: body { background:black; } @media screen and (max-width: 500px) { svg { width:50%; } } <?xml version=”1.0″ encoding=”UTF-8″ standalone=”no” ?>
Continue readingSearch icon repeating twice on mobile
Issue My svg icon is repeating twice only on iphone (xs), chrome. Here is my code: SVG <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.7888 9.58435C6.8011 11.1763 3.89152 11.051 2.04893 9.20845C0.0719048 7.23142 0.0719048 4.02602 2.04893
Continue readingCircle with fading borders on the bottom
Issue I’m trying to draw this output with css (or svg). For me, the tough part is the half-arc at the left and right side of the circle. Should I stick to pure css or is it better using images?
Continue readingSVG continuous inwards square spiral animation with pure CSS/JS
Issue I need some help with this kinda specific animation. It is a square spiral pattern that keeps going inwards until it’s fully complete. I somewhat did manage to get it going but I don’t know how to stop the
Continue readingcircle progress bar css
Issue I want to create a circle bar which stroke will be getting thicker as it progress. Is it possible using css, or svg which can run on ionic mobile app. Here is the what I want to achieve :
Continue readingAngular ngFor gives an error in svg, even though it compiles
Issue I’m trying to make a recursion of lines to make a graph, but there is a strange error in the console, even though it works on node. Here us the template: <svg height = "200" width = "300"> <g
Continue readingChange inline SVG stroke & fill colours depending on the theme
Issue I am trying to adapt the colours (stroke & fill) of an inline SVG picture in Reveal.js depending on the selected theme, i.e., dark strokes and fills for light themes and light stroke and fills for dark themes. So
Continue readingWhy does SVGR not generate a TypeScript declaration file in my esbuild configuration?
Issue I am creating an SVG icon library in TypeScript. So far, SVGR has been terrific, but the final piece I need are the generated types to allow passing title and ref to the bundled components. Reproduction I’m not sure
Continue readingHow to download animated SVG file from website?
Issue Is there any way we can download animated SVG files from the website – like from Inspect dev tool ? I wanted to examine how the animation work by importing into after effect, but right clicking and copy/paste the
Continue readingHow to make bars have different patterns in d3.js?
Issue I have a bar chart created from .csv and have created three patterns in d3.js. How can I apply these three patterns to fill each bar? Diagram for the result I want The Csv I used:Year.csv year,value 2001,10 2002,30
Continue readingHow to morph svg into another svg correctly with Anime.js?
Issue I have a problem where two of my svg have the same number of points, but something isn’t right when I play the animation, the two svgs are so close together but the animation just jumps out of nowhere
Continue readingStroke left and right side of rect svg
Issue I have drawn a rect in svg using d3 and would like to stroke only the left and right side. <rect class=”extent” x=”578″ width=”356″ height=”250″ style=”cursor: move; opacity: 0.2; fill: #FF9000;” ></rect> Solution It’s another hack, but you can
Continue readingSVG semi-arc clockwise animation over 180 degrees (half of a circle) with pure CSS/JS
Issue I need some help with my code. My goal is to make a 180 degrees progressive animation that goes clockwise for the upper half of a circle. My ultimate goal is to have two animations playing at the same
Continue readingsvg mask on a gradient animation
Issue Hello i tried out everything but don´t find the error. I have a css gradient-animation running on my background and would like to put a mask over it. The mask consists of a circle in the centre of the
Continue readingSimple SVG SMIL not showing in Safari
Issue This codepen is working in every browser, except Safari. It’s not complicated, but I am pretty new to SVG and SMIL, so I might be missing something that isn’t supported? http://codepen.io/jaminroe/pen/rVoPRp Simplified version, with only 2 shapes: <svg height=”100px”
Continue readingchange aspect ratio of svg in HTML
Issue Using HTML and CSS, how do you change the size of an SVG (using an <img /> tag to get svg file) WITHOUT keeping the aspect ratio? Solution Just add preserveAspectRatio=”none” to the <svg> root element. Or if you
Continue readingCSS to increase svg font size custom
Issue I am working with a svg element as follows and I am using css to control the font-size of the svg text. <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 1280 720″> <rect class=”vBoxRect” width=”1280″ height=”720″ fill=”none” stroke=”red”></rect> <rect class=”boundRect” x=”70″ y=”70″ width=”1160″
Continue readingHow do i properly position my SVG element, so its even on resizes
Issue So heres the image of my problem. I have two SVG files, and i want them to sticky to the bottom no matter how i resize my window, and if I resize it to a mobile configuration i want
Continue readingHow can I make my svg's grinder rotate using CSS animations while staying in place?
Issue fellow Devs, I’m currently having trouble making my grinders (or whatever they’re called) rotate properly in my svg. Basically I want them to rotate 360deg in place instead of going across the screen like so: [codepen] (https://codepen.io/UserBrayann/pen/KKQNboQ) Any solutions
Continue readingmouse actions for SVG in HTML
Issue If I embed an SVG into a HTML page, then users can click on words in the SVG (that are included as text). Is it possible (via JavaScript or similar) to find out which text element a user clicked
Continue readingAdobe Illustratore delete my class names on svg images. How can I prevent this?
Issue I have this svg image: <svg width=”160″ height=”250″ xmlns=”http://www.w3.org/2000/svg” class=”sovog”> <path class=”antenna-left” d=”M76.782 25.942c-.08-.815-2.192-20-22.867-21.928l.137-1.501c21.916 2.044 24.19 23.07 24.21 23.283l-1.48.146z” /> <ellipse class=”antenna-ball-left” fill=”#5E5E5E” cx=”55.021″ cy=”3.39″ rx=”3.344″ ry=”3.391″ /> <path class=”antenna-right” d=”M83.217 25.942c.08-.815 2.192-20 22.867-21.928l-.137-1.501c-21.916 2.044-24.188 23.07-24.209 23.283l1.479.146z” /> <ellipse
Continue readingScale path from center
Issue I have the following SVG graphic: <svg version="1.1" id="diagram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="375px" height="150px"> <path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" id="control"/> </svg> I want to programmatically change the scale of this object, but I want it to scale from the
Continue readingWhy does "<use xlink:href…" change the behavior of an svg image?
Issue I am studying the following code: * { box-sizing: border-box; } body { font-family: “Open Sans”, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; color: #223254; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .cbx { -webkit-user-select: none; user-select:
Continue readingResponsive SVGs on InternetExplorer with SVG injection
Issue To make SVGs responsive on our website with Internet Explorer 11 I am using the “Canvas Hack” by Nicholas Gallagher. This hack uses an extra canvas element to make use the SVG keeps the aspect ratio. The whole structure
Continue readingSend SVG image content to email as HTML using boto3
Issue I want to send SVG content (without saved file) as HTML to Outlook email address. This SVG content works fine in browser showing a circle image, however sending it via boto3.client to Outlook email results in empty mail. Why?
Continue readingSVGs not scaling properly in IE – has extra space
Issue I decided to switch to svg symbols for one of my projects – but need them to be responsive. The main idea is not to have multiple http requests, so I was thinking of merging all SVGs into one
Continue readingHow can I set an Attribute with case-sensitive name in a javascript generated element
Issue I create a svg element in javascript and I need to set an attribute which is case sensitive: viewBox. The element is created like this: var svgElem = document.createElement(‘svg’); Problem is when it set that attribute via svgElem.setAttribute(“viewBox”, “0,0,100,100”)
Continue readingSend SVG image content to email as HTML using boto3
Issue I want to send SVG content (without saved file) as HTML to Outlook email address. This SVG content works fine in browser showing a circle image, however sending it via boto3.client to Outlook email results in empty mail. Why?
Continue readingSVGs not scaling properly in IE – has extra space
Issue I decided to switch to svg symbols for one of my projects – but need them to be responsive. The main idea is not to have multiple http requests, so I was thinking of merging all SVGs into one
Continue readingIs it possible to fill an svg with a gradient color or background image?
Issue I have this Instagram svg logo and I want to change it’s color to either a linear-gradient or a background image on hover, is it possible using css? I’ve tried: #instagram:hover { fill: linear-gradient(red, yellow); } <svg fill=”#000000″ xmlns=”http://www.w3.org/2000/svg”
Continue readingSVG Fill Color Not Working
Issue I’m new to using SVGs and can’t figure out what I’m doing wrong here. For most of them, if I want to change the color, I use: svg path { fill: blue; } But for this one – and
Continue readingSVG aspect ratio is preserved when width is greater than height despite of the preventive setting
Issue I want the blue line to always connect top left and bottom right corners without overflow and scroll bar being displayed. Currently it only happens for when the width is less than height (more or less), otherwise it increases
Continue readingHow do I center text along an SVG curve?
Issue Is there a way to center the text along a curve in SVG? <svg width=”100″ height=”25″ xmlns=”http://www.w3.org/2000/svg”> <defs> <path id=”intermediate” d=”M 7 5 C 25 25, 75 25, 93 5″/> </defs> <text fill=”#105ca6″> <textPath style=”alignment-baseline: baseline;” xlink:href=”#intermediate”>Intermediate</textPath> </text> </svg>
Continue readingSVG add text along the circle arc
Issue I’m trying to draw SVG radial pie chart as mentioned in here: colour chart. Now I’m trying to add text to each slice along with the arc. I’m trying to show Text 1 with exact same x, y coordinates
Continue readingHow to place equally spaced svg text in order
Issue I have a svg element generated with javascript, that looks like this <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect /> <text > <tspan >this is line 1 test 1</tspan> </text> <text > <tspan>this is line 2
Continue readingText around the SVG
Issue I’m absolutely beginner with SVG, and I need to put text around this moon… I tried to make text around a path and could not get the right sizes and match it with the moon. <svg viewBox=”-6 -6 30
Continue readingCenter a div inside an svg circle with Tailwindcss
Issue I’m trying to center the div element with 29% value inside an svg circle. I’ve tried to center it using relative and absolute properties but it didn’t seem to work <!– Tailwind –> <link href=”https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=”stylesheet”> <!– Body –>
Continue readingEmber FontAwesome not displaying some of free svg icons
Issue I am working a rewrite of of an application that was previously built with Ember 3.12 and now being tested with 4.20. I am building out a few components and decided to mess around with the footer and it
Continue readingPlacing a gradient background on an image with transparent background
Issue What I would like to achieve is basically have a gradient appear on the text as opposed to the background of an image. I have created an example here: https://codepen.io/BenSagiStuff/pen/BaYKbNj body{ background: black; } img{ padding: 30px; background: linear-gradient(to
Continue readingIs there a way to use SVG as content in a pseudo element ::before or ::after
Issue I would like to use ::before to place SVG images before some selected elements: #mydiv::before { content: ‘<svg … code here</svg>’; display: block; width: 22px; height: 10px; margin: 10px 5px 0 10px; } Above code just displays the plaintext.
Continue readingSVG animation delay on each repetition
Issue I’d like to add a delay to each iteration of an SVG animation loop. Here’s a simple example. <svg xmlns=”http://www.w3.org/2000/svg” width=”100px” height=”100px”> <circle cx=”50″ cy=”50″ r=”15″ fill=”blue”> <animate id=”op” attributeType=”CSS” attributeName=”opacity” from=”1″ to=”0″ dur=”3s” repeatCount=”indefinite” /> </circle> </svg> Using
Continue readingIs it legal to put <svg> resources after </body>?
Issue Can I put svg resources used in the website behind the end of body, in order to keep them outside of what will be rendered? In short: Is it legal to do the following? <!DOCTYPE html> <html> <head>…</head> <body>
Continue readingLinks opening page *over* current page
Issue I have a website (here: http://kitandmarcin.us) with links to a variety of external pages. So far, so normal. However, when one clicks on a link, the address bar doesn’t change, and for some of the links, it is clearly
Continue readingIs there a way to use SVG as content in a pseudo element ::before or ::after
Issue I want to place some SVG images before some selected elements. I am using jQuery but that is irrelevant. I would like to have the ::before element to be as: #mydiv::before { content: ‘<svg … code here</svg>’; display: block;
Continue readingCustom div Shape with CSS and HTML
Issue I want to create a div of this shape. I am unable to get rounded corners on all the corners with pseudo-elements such as ::before and :: after . I tried to manuplate this code but unable to reach
Continue readingStar rating with half star support
Issue I am running into a problem rendering a star rating and was hoping I can get some extra eyeballs on my problem. I have the normal rating working just fine with whole numbers but I am struggling to display
Continue reading