Comment by Mystery-Machine
4 days ago
Just tried to edit this icon so that the arrow is in the center of the circle. The mask wasn't properly recognized and so it only shows a black circle:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" stroke-width="2" stroke="black"> <circle cx="10" cy="10" r="10" fill="currentColor" mask="url(#maskArrow)"></circle> <mask id="maskArrow"> <circle cx="10" cy="10" r="10" fill="white"></circle> <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.41z"></path> </mask> </svg>
As I wrote in the post above, masks and filters are not not supported, yet.
For your icon a clip path may make more sense than a mask. If you want to create an icon with the same shape you can simply take the elements from the mask and paste them into Hyvector and work with that:
<circle cx="10" cy="10" r="10" fill="white"></circle> <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.41z"></path>