Comment by Mystery-Machine
10 months 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>