svg – Page 6 – Tarik Billa

How to place multiple evenly-spaced arrowheads along an SVG line?

March 27, 2023 by Tarik

Based on a clarification of the question, here’s an implementation of creating intermediary points along a <polyline> element such that the marker-mid=”url(#arrowhead)” attribute will work. See below that for an introduction to markers and arrowheads. Demo: http://jsfiddle.net/Zv57N/ midMarkers(document.querySelector(‘polyline’),6); // Given a polygon/polyline, create intermediary points along the // “straightaways” spaced no closer than `spacing` distance … Read more

How to get an outline effect on text in SVG?

March 19, 2023 by Tarik

paint-order: stroke; worked wonders for me in this D3 chart I’m working on. My final css: .name-text { font-size: 18px; paint-order: stroke; stroke: #000000; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; font-weight: 800; } My source (scroll down just a bit): https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty

dojox.gfx bounding box for Text and Group nodes

March 18, 2023 by Tarik

I found no reference for a bounding box for Group object, but when using the latest Dojo version, getBoundingbox returns null for Groups as well Is this problem related to this bug fix? Sounds like it to me. It was Changed 7 months ago by pruzand and marked as fixed http://bugs.dojotoolkit.org/ticket/7019 Update 2012-07-24: I downloaded … Read more

SVG shadow cut off

February 15, 2023 by Tarik

You need to increase the size of the filter region. <filter id=”SVGID_0″ y=”-40%” height=”180%”> works just fine. The silent defaults for the filter region are: x=”-10%” y=”-10%” width=”120%” height=”120%” – large blurs usually get clipped. (Your shadow isn’t getting clipped horizontally because your width is about 2.5x your height – so that 10% results in … Read more

How to use an SVG file in a SvgIcon in Material-UI

February 10, 2023 by Tarik

1. Using <Icon/> component and an <img/> element To use a SVG file as an icon, I used the <Icon/> component with an <img/> element inside, setting the height: 100% to the img element and textAlign: center to the root class of the <Icon/> component did the trick: JSX: import Icon from ‘@material-ui/core/Icon’; import { … Read more

Convert SVG to transparent PNG with antialiasing, using ImageMagick

February 6, 2023 by Tarik

Instead of -background transparent, use -background none. convert -background none in.svg out.png NOTE: The order of the arguments is important.

flip svg coordinate system

February 2, 2023 by Tarik

I have done a lot of experimentation, and the only logical method is as follows: <g transform=”translate(0,400)”> <g transform=”scale(1,-1)”> Where 400 is the height of the image. What this does it move everything down so that the top of the image is now and the bottom of the image, then the scale operation flips the … Read more

Pure SVG way to fit text to a box

January 31, 2023 by Tarik

I didn’t find a way to do it directly without Javascript, but I found a JS quite easy solution, without for loops and without modify the font-size and fits well in all dimensions, that is, the text grows until the limit of the shortest side. Basically, I use the transform property, calculating the right proportion … Read more

Can I apply a gradient along an SVG path?

January 27, 2023 by Tarik

Mike Bostock figured out a way, though it’s not easy: https://bl.ocks.org/mbostock/4163057 Basically, this technique uses getPointAtLength to slice the stroke into many short strokes, specify interpolated color stops for each, and then apply a gradient to each short stroke between those stops. Good luck if you’re up to the challenge 😉 Edit (July 3rd, 2019): … Read more

How to use the viewBox attribute?

January 25, 2023 by Tarik

The width and height are how big the <svg> is. The viewBox controls how its contents are displayed so the viewBox=”0 0 1500 1000″ will scale down the contents of <svg> element by a factor of 5 (1500 / 300 = 5 and 1000 / 200 = 5) and the contents will be 1/5 the … Read more