2

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: Ugly arrow

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...

| improve this question | |
  • 1
    Can't you do: stroke to path for the tip (to keep it sharp), and then union the several objects? Then it will be one path object and have one uniform transparency. – Rudy Velthuis Oct 18 '18 at 21:17
2

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%

enter image description here

  1. 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

enter image description here

| improve this answer | |
1

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

| improve this answer | |
  • 1
    In Inkscape, you can do that by setting the object's opacity value either in the bottom left 'O' field or by using the slider provided in the Fill & Stroke dialog. – Moini Oct 18 '18 at 20:31
  • Moini: this is what i meant in my question, it seemed not to be the most elegant way to do it. @Danielillo, thanks, I weren't even aware that there is the option to structure styles like that, thanks (cannot up-vote yet). I am still curious, if there is another solution, so I wait another week or so before I accept the answer – Baedsch Oct 19 '18 at 8:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.