Alpha for node markers in Inkscape

Question

I try to create a SVG containing a an arrow which is supposed to have the color RGBA 00000086 so it is not completely opaque. Unfortunately, it looks like this:

If I set the color (both contour and filling) to RGBA 000000ff, everything looks fine (black). Of course I can tweak the opacity of the whole object, however this does not seem like a neat solution to me...

Answer 1

I can think of two ways to do it right in Inkscape - without the need to edit the SVG code directly.

1. Don't set the alpha channel to transparent in the colour value, set the colour to 000000ff (full opacity black).

   86 in hex is equivalent to 134 in decimal.

   So, 134/256*100 = 52.3%

   Draw a line, set an arrow head in the Markers options.

   Set the stroke opacity to 52.3%

2. Do Path > Stroke to path, move the arrow head slightly to the right away from the edge of the line, then Unite the arrow head and line to make a filled shape, and fill it with 00000086

Answer 2

Instead of using RGBA color + alpha to each object, make the path or shape 100% black and use a style class to set the transparency to the object group:

<defs>
<style>.transparency {opacity:0.6;}
</style>
</defs>

Sample code

<svg xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 231 74.06">

<title>Arrow</title>

<defs>
<style>.transparency {opacity:0.6;}
.color{fill:none; stroke:#000; stroke-linecap:round; stroke-miterlimit:10; stroke-width:20px;}</style>
</defs>

<g class="transparency">
<line class="color" x1="10" y1="37.03" x2="171.3" y2="37.03"/>
<polygon points="143.22 74.06 158.95 37.03 143.22 0 231 37.03 143.22 74.06"/>
</g>
</svg>

Here a link to a Jsfiddle