svg
How to connect a CSS font to SVG
In the first image, the font is not tightened
In the second image, what should the logo itself look like with the font appli ... x(1.3218 0 -0.2588 0.9659 573.8547 2211.6697)" class="st6 st4 st7">F</text>
</g>
</g>
</svg>
Doesn't the background SVG display on the page?
I'm trying to use SVG as a background-image for a block, but instead of the background there is an empty block.
What could b ... i.pinimg.com/originals/cc/ce/35/ccce355cc6f83a3b12ac4e752c795e69.jpg"
mask="url(#cat)">
</image>
</svg>
How do I place an svg icon in the center of a circle?
How do I place an svg icon in the center of a circle?
.circle {
width: 80px;
height: 80px;
border: 2px solid n ... dius: 50%;
background: #e1e1e1;
}
<div class="circle">
<img src="img/vk-icon.svg" alt="Вк">
</div>
Clip path inside the circle?
Is it possible to create an inner circle clip path contour so that the clip path contour effectively cuts a hole through the ... 0px at center);
}
<div></div>
Free translation of the question Clip path inset circle? from member @Rafty.
How to use CSS or SVG to make a glow around the image when hovering
Here is the layout
Here is the HTML
<div class="gumb_thumb blue">
<div class="img_2_box">
<img src="ima ... anslate(-50%, 0);
transform: translate(-50%, 0);
}
When applied to the gum, a blue glow should appear. How do I do this?
SVG animation and anime.js
I saw such an interesting animation in the library animejs.com.
So I realized that each letter is described in:
<path cl ... ffset: 47.1289px;" stroke-dasharray="47.128875732421875"></path>
</g>
</svg>
</div>
Arrow block using SVG
I need to draw a nice shaded block arrow using SVG from one point (x0, y0) to another (x1, y1) as shown in the picture.
... nging the parameters, that would be cool).
In fact, it should look the same as in the picture. Is this even possible?
Animation of drawing SVG images with lines
There are blocks that need to be animated:
[https://codepen.io/skynetwind/pen/JjYVVyO][2]
Tell me how to do it?
It turns ... ng is cool, but the thickness of the lines after the animation is thicker. And the animation time is no more than 6 seconds.
How to make a smooth erase on the edges of svg
How to make a smooth erase at the line ends as in the screenshot using svg?
I only got it like this, but the ends are not rub ... 3.000 17.403,22.656 49.000,6.000 C81.878,-11.331 129.000,15.000 129.000,15.000 "/>
</g>
</g>
</svg>
Rotating an SVG circle with a group element
I would like to rotate the SVG circle without letting the other elements rotate
When I try to rotate a circle (white) using ... th stroke="#000" stroke-width="1px" d="M1100 495 1100 675"></path>
</g>
</g>
</svg>
Convert HTML font to SVG curves
Similar questions were asked in these topics:
Converting text to path
How do I draw the letter S?
Everything is clear from th ...
Question:
And if you don't have a vector editor at hand, is there another way to get letter outlines using SVG curves?
How do I draw the letter B using SVG?
How do I draw the letter B using SVG?
<svg>
<polyline stroke-width='4' stroke='red' points='20,80 20,130 50,130 50,105 20,105 20,80 50,80 50,110' fill='none' />
</svg>
How to draw and animate a train?
I was interested in the work of participant @Arthur, where he drew and animated the movement of the train using SVG technolo ... r means and technologies for drawing and creating the effect animations and transformations specified in the question labels?
Stroke text in pure CSS
I want to make a stroke of the text as on the layout, but it does not come out.
Here's how it should be:
What happened to me ... -family: GBold;
font-size: 150px;
}
<div class="box-first">
<p class="box-design">DES</p>
</div>
How to display a tooltip when hovering over an SVG element
I need a built-in SVG diagram with the "additional information" icon, when you hover over it, a tooltip should appear. See th ... .
Free translation of the question How to display a tooltip div when an SVG element is hovered from participant @user1275105.
How do I display a tooltip when hovering over a map region?
I have, say, a US map.
<style>
.state {
fill:white;
stroke:dodgerblue;
}
</style>
<body>
& ... ut this state.
P.S
Map is incomplete, only a few states, as there is a limit - no more than 30,000 characters in the snippet
How do I make an svg mask for a video?
<svg viewBox="0 0 1400 1050" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id='mask'>
... om/A1835.jpg' mask='url(#mask)' />
</svg>
The mask works on the image, how do I make it work for the video?
How do I apply an SVG filter (s) to create a color SVG shape of the entire silhouette?
I have an image in PNG, for example of a chess piece (white king).
Is there a simple way to apply SVG filters to this image to get an SVG that has the same shape (outline) and is filled with a single color, such as red?
How to animate a route (path) on an SVG map?
There is an SVG map created on Raphael. How can I animate a route between two clicks on the map, like here
Example in the pic ... ure -
Yandex and Google maps it is clear there's an API, but how to make something like this in SVG. Are there any examples?
How to save the aspect ratio of a div using CSS
I want to create a div that can change its width / height when the window width changes.
Are there any CSS3 rules that allow ... to use CSS only.
Free translation of the question Maintain the aspect ratio of a div with CSS from the participant @ackb.