All Questions
12,130
questions
0
votes
1
answer
46
views
Positioning an input button and overriding SVG
If you make the beginning coordinates and ending coordinates of the Bezier curve equidistant, then you can duplicate Bezier curves.
If you click the button, a second Bezier curve will appear under the ...
-3
votes
0
answers
30
views
Create square SVG that fills out remaing vertical or horizontal space [closed]
I have a square SVG image. I would like to fit it into the page such that it fills out either remaining horizontal or vertical space (whichever is smaller). I can't seem to make it happen with flexbox ...
- 2,270
0
votes
1
answer
50
views
HTML SVG Reduce Path Circle Size
I have a svg grey circle and a red path that follows the circle/overlays.
Does anyone know how to shrink the red circle so that it 100% covers the grey circle?
I cannot for the life of me work out how ...
- 1
0
votes
1
answer
69
views
SVG Component Rendering Inconsistently Across Browsers
I'm working on an SVG gauge component that works perfectly in Chrome but has rendering issues in Safari and Firefox. The gauge displays progress using a gradient fill and a rotating pointer. In Chrome,...
0
votes
1
answer
62
views
Transition on Fill property with linearGradient inside of SVG
I'm trying to achieve some kind of Stepper. It all works well except for the transition on the fill.
let step = 0;
document.querySelector("button").addEventListener('click', () => {
step++;
...
- 196
-2
votes
0
answers
24
views
How to change the color of the svg icon using tailwindcss only while hovering through it? [duplicate]
I already read the questions about the SVG and this question my question is about how to do this with Tailwindcss only.
The project tools are React and Tailwindcss.
I want to change the color of the ...
- 131
0
votes
2
answers
64
views
CSS local svg icon color [duplicate]
I am trying to setup some custom svg icons like this
<i class="my-svg-icon"></i>
I have the svg displayed but cannot adjust the color
.my-svg-icon {
height: 25px;
width: ...
- 807
-3
votes
0
answers
42
views
How to make the parent element have the same width and height as the child svg element? [closed]
Hi so I am currently making a project with Vite.js with React + TSX, Tailwind and Daisy UI. I am currently trying to make a model button that overlaps a svg. The issue is that the button's width and ...
- 25
0
votes
1
answer
35
views
Links(Hyperlinks) inside an svg not working when the svg is placed in an img tag in a Bootstrap 5 Modal
In fact , the pointer doesn't even change its shape when it is hovered over the part containing the hyperlink. When I open the svg file separately in my browser , the links work alright . Below is ...
1
vote
1
answer
70
views
Why don't SVG filters take into account the position of the SVG's viewBox, since they do take into account its size?
<svg viewBox="60 0 200 40">
<filter id="blur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="1" />
</filter>
<path d="M 70 5 l 0 10" style="filter: ...
-1
votes
0
answers
30
views
How to customize animation of svg in react? [closed]
I am pretty curious how brilliant creates a page like this:
The animation of svg is compeletely interactive to the programming block in the toolbox.
I want to make a page similar to this in react. Is ...
- 17
2
votes
1
answer
41
views
Is it possible to disable svg's animate element for prefers-reduced-motion media query?
I've got an svg with animation done using animateTransform element
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<...
- 24.3k
3
votes
1
answer
79
views
Fixing Transparent Line Between Div with Clip-Path and Parent Div
A thin, transparent line appears between the triangular div and its parent div when zoomed. I believe this is likely caused by anti-aliasing in the browser. If there is a way to fix this, I would ...
- 41
-2
votes
0
answers
48
views
Extract CSS From SVG and move it to seperate file [closed]
mkdir your-project-directory
cd your-project-directory
mkdir svgs
npm init -y
npm install xmldom
touch script_name.js
const fs = require('fs');
const path = require('path');
const { DOMParser, ...
- 19
2
votes
1
answer
62
views
Is there a way to make the visual effect of linear gradient colors in SVG and CSS the same?
I found that the visual effect of the linear gradient color is different between SVG and CSS, especially in the adjacent part between two colors. I want to know if this is due to differences in linear ...
- 125