I need strokes to scale with width but not with height.
This is the closest I've come to a solution:
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="50">
<rect width="100%" height="100%" fill="black"/>
<svg viewBox="0 0 1 1" preserveAspectRatio="none">
<path vector-effect="non-scaling-stroke" stroke-width="5" stroke="blue" d="
M 0,0 L 1,1
M 0,1 L 1,0
"/>
</svg>
</svg>
This lets me change the height without affecting the stroke width, but also I need the strokes to scale when the entire svg is scaled. The problem is that I can't make the strokes scalable again. I've tried using percentages, but they are relative to the diagonal size.
I'm trying to draw a partial circle with svg's path. I have the circle center coordinates, radius and the start/end coordinates (where the partial circle will end), but I can't wrap my head around on how to draw the circle.
I hope that this small example can help you. The path starts in 50%,50% (center), moves to 50%,0 (that is 12 o'clock), creates an arc where radius x and y are 50 (the fist two numbers after a) and ends in the position that is a calculation with sin() and cos() on 45 degrees (the angle should be in radians). The three numbers in between (0 0 1) are flags.
See more here: d - Elliptical Arc Curve
// 45 deg:
console.log(Math.cos(Math.PI/4)*50, 50-Math.sin(Math.PI/4)*50);
document.querySelector('path')
.setAttribute('d', `M50,50 L50,0 a 50 50 0 0 1 ${Math.cos(Math.PI/4)*50} ${50-Math.sin(Math.PI/4)*50} z`);
<svg width="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="lightblue" />
<path fill="navy" />
</svg>
I'm implementing a real-time chromakey in order to transform green pixels displayed from the webcam in the webpage, into transparent pixels.
The SVG filter that I found seems pretty powerful but it's still quite unclear for me about how to use it.
The feMatrixColor filter from SVG:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix
I found this example https://codepen.io/iamschulz/pen/MmxdMQ that is close to what I'm trying to do.
I have to calibrate the color when my application loads, and to do so I need to generate the matching color matrix.
<feColorMatrix type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
1.5 -2 1.5 0 1" />
Above is an example where the alpha is set to zero for a defined green color. I don't use it as the perfect reference, but it works. Furthermore, I noticed that the last column do a lot in the rendering and I didn't get what's it's role. The quality of the final result varies a lot depending on this value.
I'd like to create a function which returns me a matrix with a picked color in the input but I don't understand the logic behind that matrix.
This is an example where I'm using an svg filter to remove the green. I've used this tool (where you can drag and drop an image) to get the right filter: https://codepen.io/enxaneta/full/ENRZGO
<svg viewBox="0 0 90 50">
<defs>
<filter id="f">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 0 1 -1 1 "></feColorMatrix>
</filter>
</defs>
<g filter="url(#f)">
<rect fill="red" width="30" height="50" />
<rect fill="green" x="30" width="30" height="50" />
<rect fill="blue" x="60" width="30" height="50" />
</g>
</svg>
I have an svg and when I define the fill it behaves as stroke
For example
<svg stroke="black" fill="red">
<path d="M10 10 H 90 V 90 H 10 Z"/>
</svg>
This works as expected, but when I have
<svg stroke="black" fill="red">
<path d="M12,5.41,19.59,13H15v6H9V13H4.41L12,5.41M12,4,3.71,12.29A1,1,0,0,0,4.41,14H8v5a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14h3.59a1,1,0,0,0,.71-1.71L12,4Z"/>
</svg>
It doesn't. Any suggestions why the fill doesn't work as the other svg ?
DEMO
<svg stroke="black" fill="red">
<path d="M12,5.41,19.59,13H15v6H9V13H4.41L12,5.41M12,4,3.71,12.29A1,1,0,0,0,4.41,14H8v5a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14h3.59a1,1,0,0,0,.71-1.71L12,4Z"/>
</svg>
<svg stroke="black" fill="red">
<path d="M10 10 H 90 V 90 H 10 Z"/>
</svg>
If we enlarge the arrow, you will see what is happening.
<svg viewBox="0 0 40 40"
stroke="black" fill="red" stroke-width="0.2">
<path d="M12,5.41,19.59,13H15v6H9V13H4.41L12,5.41M12,4,3.71,12.29A1,1,0,0,0,4.41,14H8v5a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14h3.59a1,1,0,0,0,.71-1.71L12,4Z"/>
</svg>
As Robert said, you have an arrow shape with an arrow shaped hole inside it. Your arrow was appearing black, instead of red, because at that small size the thickness of the black stroke was hiding the red fill.
If you want a red arrow with a black outline, then you will need to redesign your shape so that it is just a single outline, not a "double-walled" one.
Folks, let me start by saying that StackOverflow has been invaluable help in my project to design an open-source javascript eye-testing chart. Thank you all.
My question is how best to draw a capital letter R in a 5 high by 4 wide grid, that will work at 0.1 alpha (so no overlapping elements allowed).
Here's my best attempt so far. The difficulty is in the meeting between the arc and the diagonal, which is not a straight line.
<svg id="Snellen_R" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5"
stroke="black" fill="none" stroke-width="1" >
</path>
<polygon points="1.4,3 2.1,3 2.2,2.99 2.3,2.98 2.35,2.97 2.4,2.96 2.45,2.95 2.5,2.94 4,5 2.8,5" fill="black" />
</svg>
Thanks.
Inkscape may be able to help you. It's an open source vector graphics editor. I've used it several times for creating text graphics. If anything you can use Inkscape to draw your letter, and then look at the code it generates. You can also save your graphic to a .svg file, or export to another format such as .png.
Here is the link:
https://inkscape.org/en/
Plenty of youtube tutorials out there as well. Good luck!
There's actually no problem having elements overlapping. Just apply the opacity setting to the whole <svg> element instead of setting separate fill-opacity and stroke-opacity values for the drawing elements inside it.
<p>
<svg viewBox="0,0,4,5" height="100" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5" stroke="black" fill="none" stroke-width="1" stroke-opacity="0.1">
</path>
<polygon points="1.32,2.9 2.12,2.9 2.42,2.9 4,5 2.8,5" fill="black" fill-opacity="0.1" />
</svg>
<br/>Opacity applied to <tt><path></tt> and <tt><polygon></tt> elements</p>
<p>
<svg viewBox="0,0,4,5" height="100" style="margin: 3.49mm; opacity:0.1">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5" stroke="black" fill="none" stroke-width="1">
</path>
<polygon points="1.32,2.9 2.12,2.9 2.42,2.9 4,5 2.8,5" fill="black" />
</svg>
<br/>Opacity applied to <tt><svg></tt> element</p>