Questions tagged [svg]

13337 questions
1

votes
5

answer
763

Views

SVG images shown blacked out in UWP application

me and my team are trying to put some .svg icons in our UWP win10 application (target and min version are Windows 10 Fall Creators update). In my resource file I defined my SvgImageSource as following: And I then proceed to use this image source in my component: I tried few different svgs and they a...
ivke
1

votes
2

answer
1.7k

Views

Dompdf not generating pdf properly from SVG

I am having trouble generating pdf keeping design with SVG content. SVG is linked inside html, and using html to generate pdf. But not working properly. This is the code: $dompdf = new DOMPDF(); //HTML Content $html = setPaper('A4', 'portrait'); $dompdf->set_option( 'isRemoteEnabled', true ); $dompd...
тнє Sufi
1

votes
2

answer
384

Views

What is the default ARIA role for an SVG?

I have been trying to determine what the default role of an SVG tag should be if the role attribute is not present and the document contains visible graphics. Using Chrome's accessibility tools it tells me that the role is SVGRoot: However this is not a valid ARIA role, it's one of Chrome's own role...
Godwin
1

votes
2

answer
328

Views

Converting SVG to another format fail due to delegate not being found

I have PHP code running on Debian stretch with ImageMagick. It tries to convert SVG to another format. Here is how it starts $im = new Imagick(); $im->readImageBlob($svg); The variable $svg contains valid SVG code in a string. If I copy this string to a text file with a .svg extension then it opens...
Gherman
1

votes
2

answer
54

Views

How to animate stroke-dashoffset with SVG animate?

To animate stroke-dashoffset I am aware of using CSS @keyframes to move the stroke-dashoffset of a SVG path. However, because I want to size the SVG with background-size: cover, I am unable to target the individual elements inside the SVG since it's being referenced as a background-image in CSS. Is...
jchi2241
1

votes
2

answer
111

Views

Why does order of transforms matter? SVG rotate/scale doesn't give the same result as scale/rotate

After combing through the SVG specification, and guides such as this and this, I am still struggling to understand exactly how chaining transforms work. Selected Relevant Quotes When you apply the transform attribute to an SVG element, that element gets a 'copy' of the current user coordinate system...
Magnus
1

votes
2

answer
57

Views

Stroke animation, how to attach another path to the appearing stroke?

I have the following animation: @keyframes dash { to { stroke-dashoffset: 0; } } #currency-chart-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 30s linear forwards; } Run the code snippet to see the animation. I want to attach the arrow to the stroke so it look like...
Dimitri Kopriwa
0

votes
0

answer
3

Views

I want to put a scrollbar to my svg image so that it occupies only specific area on my webpage

I have a svg file which occupies almost the entire HTML Page. Instead i wish to put a scrollbar and give it only a specific space so that I can place other elements in the page. But it cuts off my image maybe because it has elements which have co-ordinates that don't fit inside the give space and th...
Mansi Mehta
0

votes
0

answer
4

Views

Why is mpath curve offset in SMIL Animation

I have a rectangle (grey) that moves from point A to B (dotted rectangle) along a curved mpath (black). In the final SVG, the rectangle moves along the curve, but its always offset by some y value even though both paths start at (0,0). What is causing the offset? How can I fix this? SVG: SMIL: .s...
cdpp
1

votes
2

answer
31

Views

How do I use mouseover for an element hidden behind an invisible element?

I have a button that is a rectangle and text and an invisible rectangle on top. The invisible rectangle helps make sure that a user can click anywhere on the button, including over the word PLAY. The invisible rectangle is preventing my .on('mouseover') effect from working, which changes the color o...
Cauder
1

votes
1

answer
34

Views

Responsive polygon (triangle) SVG

I'm trying to build a page with 2 polygons, but i'm facing some problems with aspect ratio on mobile or tablet mode. Check the codepen and resize the window, you will see that the red triangle doesn't keep correct shape as well as the icon inside. Would be really nice if you can help me to accomplis...
Lucien
1

votes
2

answer
52

Views

How to access to 'rect' type element through Selenium-Python

There is a rect object in the dom: I am trying to search it with following code: WebDriverWait(driver, 1).until(ec.presence_of_element_located(('xpath', '//rect[@id='id123']'))).click() This does not work. But the following does: WebDriverWait(driver, 1).until(ec.presence_of_element_located(('xpath'...
barry_allen
1

votes
3

answer
74

Views

How can I use fade effect like a css transition to a image tag in SVG?

I have a svg image that is clipped by a polygon. I have 5 images in total and I'm letting the image change every 3 seconds by JS. It looks ok, but the image switches too fast and abruptly, so I want to use some fade effect on them when they switch. Could anyone help me figure out how I can achieve t...
gwen
1

votes
2

answer
27

Views

How to color a region i.e the intersection of two object?

I want to color an intersection of two object, let's say a circle and a rectangle. What I have tried so far is to defined a path bounding that region then add the fill attribute, but it seems too complicated. Is there any other ways to do so? Let me elabotare more one the problem: I have a set of li...
Godgog Arsenal
1

votes
2

answer
13

Views

Why does the browser add padding around svg elements and how can I prevent it?

I'm trying to use SVG to make a graphic like this: Here, the purple boxes are spans with a white right border, and there are 12 in each column. Setting the width to 8.333% (which is 100 / 12) makes this work out. For various reasons (such as printing), I'm trying to do this instead with svg elements...
Joshua Frank
1

votes
1

answer
52

Views

Draw multiple Rectangles with svg.draw.js

The issue was already posted here, but I think was never addressed. I need to create a new rect each time I click 'Create SVG Rect' button. Hence drawing multiple rectangles. #test_slide { width: 500px; height: 500px; cursor: crosshair;border: solid;} Create SVG Rect document.getElementById('create_...
Waqas Bukhary
1

votes
1

answer
27

Views

svg spinner created with styled components sharing same color

I'm playing around with styled-components and trying to create a svg circle spinner component. Everything is great except when I try to use the component multiple times in same page then every component is using the same strokeColor from the last one. The other props strokeWidth is working fine thou...
Tushar Khatiwada
1

votes
2

answer
32

Views

Struggling to add text inside path SVG objects

I have converted a jpeg to SVG using Illustrator. Within the six circles I wanted to be able to center some text that I could customize. I have tried the following code and nothing is appearing. At this stage I am not sure where I am going wrong as I followed previous advice I have seen on stackover...
Tom J
1

votes
2

answer
90

Views

how to override svg elements like <text> in my external CSS

my problem is to override svg elements like < text > in my external CSS. for example, if I have transform: rotate in my < text > and I want to override this on a media querie @media screen and (max-width: 28.125em) in my CSS. my html : My heading so now i have the media querie @media screen and (ma...
einsiedler
1

votes
2

answer
22

Views

Easing animateMotion in SVG

I want to apply an easing to an animateMotion tag. I'm confused about which attributes are relevant to animate a shape: if I understood well calcMode='spline' is required, along with the definition of keyTimes and keySplines; but what about the use of keySplines and values? However, I tried to inse...
fillotassi
1

votes
1

answer
26

Views

Dynamic Radial progress bar

I'm working on a radial progress meter for a fundraiser and would like to keep track of the donations based on percentages. I have everything working except the stroke fill is off. Example: I set the data-percentage to 75 and it renders around 55%. (The fill stroke starts to show at data-percent='38...
echo
0

votes
0

answer
7

Views

SVG element rotate on circle

So I have a SVG element - big circle - and group of elements inside . I would like to rotate this elements around this big circle. The code is very simply, but I'm already freaking out how to set this circle (graph__skils) on correct path (big circle). As you can see on link below this small circl...
Agata
0

votes
0

answer
5

Views

Is there a way to load online animated svg image in android?

Now I am using GIF to load animations from back end. I would like to reduce network traffic and start using animated SVG. Is there a way to achieve that? Tried to google it, but did not found any actual answer. For image loading I am using Glide.
Antonis Radz
0

votes
0

answer
3

Views

When updating the transform of an SVG element, Firefox moves the clip-path while Chromium doesn't - which is right and what is a portable solution?

Firefox and Chromium have different behaviors when the transform of a clipped SVG element is updated. Firefox moves the clip path, whereas Chromium does not. Example code: Click to translate var b = document.getElementById('button'); var g = document.getElementById('group'); b.onclick = function(eve...
TAH
1

votes
2

answer
34

Views

SVG as background image inlined in style attribute

I'm trying to inline an SVG as a background image of a div. This works fine in a stylesheet: div { background-image: url('data:image/svg+xml;charset=utf8,'); } As I'm using a templating language with PHP, I need to make the stroke of the SVG dynamic. To make it dynamic, I'm trying to inline the back...
Acidic
1

votes
1

answer
2.1k

Views

How to remove d3.behavior.drag().on(“drag”,…) event handler [duplicate]

This question already has an answer here: D3.js: Remove force.drag from a selection 3 answers I have the following attached to a svg element var dragger = d3.behavior.drag() .origin(function(d) { return d; }) .on('drag', this.move) .on('dragend', dropHandler); //caller var g = c.append('svg').call(...
Arihant
1

votes
2

answer
317

Views

can I close an SVG path without using a z parameter?

Can I just finish a path where I started it and it will be considered closed or does the Z command have to be used? For example, is this path d='M150 0 L75 200 L225 200 L150 0' stroke='black' fill='none' the same as this path d='M150 0 L75 200 L225 200 Z' stroke='black' fill='none' or are there two...
Babika
1

votes
1

answer
627

Views

How to change start point of svg line animation

I use stroke-dasharray to create line animation when hovering it, would I have any way to change the start point? as this photo /* layout */ body { margin: 50px; } .container{ left : 50%; } /* main */ .svg-outer:hover { stroke-width: 8px; stroke: rgba(255, 0, 0, 1); animation: MaplogoCona...
Chunbin Li
1

votes
1

answer
88

Views

Using feMorphology svg filter trims corners in the output

I am using SVG filter feMorphology's dilate to implement shadow spread for a shape. Am expecting below result. Test But my code returns somewhat trimmed corners in some shapes. Help me sort out this.
Muthurathinam
1

votes
2

answer
302

Views

Responsive SVG viewBox

I made a 'hamburger button' in SVG, as seen below. body { margin: 0; text-align: center; } svg#ham-btn { margin: 2rem; border: 1px solid black; fill: #383838; } #ham-btn { cursor: pointer; } #ham-btn:hover #r1 { outline: 1px solid transparent; transition: transform 0.2s; transform-orig...
Magnus
1

votes
2

answer
44

Views

SVG in HTML: How to use a multicolored SVG as a mask

I know how to use SVG masks to completely 'cut out' the mask in another shape, if the mask is monochrome. How can I use a multicolored SVG definition X as the mask so that the outer shape of X defines the 'hole' to be cut out? Here are three images that illustrate what I am trying to achieve: svg #...
Tolo Salient
1

votes
3

answer
52

Views

Extracting a word from a string starting with a particular word till the end

I need to extract a particular attribute from an HTML element. This is an SVG element and it has clip-path as an attribute. I need to replace the clip-path that comes with the html with my custom clip-path. How can i do that. My outer HTML looks like this: .... I want to replace clip-path='url(file...
Shweta Singh
1

votes
2

answer
76

Views

SVG - create path for textpath dynamically?

I want to have a curved text along a path (half circle) in SVG. I have followed this tutorial, which is great: https://css-tricks.com/snippets/svg/curved-text-along-path/ The problem is that the path presented there works only for this specific text - Dangerous Curves Ahead. If you leave only Danger...
feerlay
1

votes
3

answer
49

Views

How to give an SVG shape a background Image

I have an SVG shape which will have a background Image covering it. I'd like to make this background image CMS editable so rather than just plonk the image in I want to do this with an SVG container that has a background-image assigned to it or at least something I can use to allow PHP to echo out t...
Pierce
1

votes
2

answer
45

Views

Dynamically generate SVG with images inside?

AngularJS app. Basically I've to make an horizontal arrow-like drawing with images that will be repeating inside depending on the array of items i sent to the html(ng-repeat). I got told the best would be svg so here I am, but my knowledge of svg is pretty low. So I managed to make a little arrow wi...
Brian Suárez
1

votes
2

answer
51

Views

Resizing SVG in HTML without resizing canvas

I am trying to increase the size of an SVG image by changing the height and width parameters but it doesn't work instead the size of the canvas changes and navigation bars appear. Also there are two copies of height and width parameters. I don't know which ones to change. ...
Faustus
1

votes
2

answer
35

Views

How can I align svg circle in the middle of the div?

I need to make a circle emulating the button for closing the window in the Mac OS. But when I try to move it lower, svg's border cuts it off. How can I move the border to place the circle directly in the middle of the panel (vertically)? JSFiddle: https://jsfiddle.net/sm6r0kvn/2/
Denis Alexeev
0

votes
1

answer
5

Views

In React or React Native, setting a color to an SVG

Can you set a prop that normally takes a hex color to an SVG? In React Navigation, the active background (the color of the tab behind the tab icon/text) needs to be an SVG, not a hex color like this: tabBarOptions: { activeTintColor: colors.white, activeBackgroundColor: , inactiveTintColor: colors....
Perry Hoekstra
0

votes
0

answer
15

Views

I need to convert some coordinate to pixel x,y

The problem is I don't know what this coordinate called '3562.1< s36 d 26 ' n' I don't know if it's called bearing or UTM coordinate To help. the coordinate was used to plot a lot on AutoCAD or ark gis < angle ' minute S south D degree N north
Learned
0

votes
0

answer
3

Views

How can i turn my svg element witch is a circle with a clockwise animation when parsing soem values into a counter clockwise one

I have a circle(svg element) witch is rotating clockwise when i send data How can i reverse the animation in order to behave like count clockwise element var endpoint = validValue / 100 * 360; var oldEndpoint = this.GetValidValue(oldValue) / 100 * 360; const arcRenderFcn = (val) => { // clear previo...

View additional questions