From 78494dd6ffd9e3cab3fe1909f4bc3e030ed68e2c Mon Sep 17 00:00:00 2001
From: Thaddee Tyl <thaddee.tyl@gmail.com>
Date: Thu, 15 Dec 2016 02:09:07 +0100
Subject: [PATCH] Fix blurry rounded corners on WebKit

WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=135616
Fixes #732
---
 templates/flat-template.svg    | 6 +++---
 templates/plastic-template.svg | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/flat-template.svg b/templates/flat-template.svg
index 08dfc47..ff5c943 100644
--- a/templates/flat-template.svg
+++ b/templates/flat-template.svg
@@ -4,11 +4,11 @@
     <stop offset="1" stop-opacity=".1"/>
   </linearGradient>
 
-  <mask id="round">
+  <clipPath id="round">
     <rect width="{{=it.widths[0]+it.widths[1]}}" height="20" rx="3" fill="#fff"/>
-  </mask>
+  </clipPath>
 
-  <g mask="url(#round)">
+  <g clip-path="url(#round)">
     <rect width="{{=it.widths[0]}}" height="20" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
     <rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="20" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
     <rect width="{{=it.widths[0]+it.widths[1]}}" height="20" fill="url(#smooth)"/>
diff --git a/templates/plastic-template.svg b/templates/plastic-template.svg
index 42ab89f..a076ced 100644
--- a/templates/plastic-template.svg
+++ b/templates/plastic-template.svg
@@ -6,11 +6,11 @@
     <stop offset="1"  stop-color="#000" stop-opacity=".5"/>
   </linearGradient>
 
-  <mask id="round">
+  <clipPath id="round">
     <rect width="{{=it.widths[0]+it.widths[1]}}" height="18" rx="4" fill="#fff"/>
-  </mask>
+  </clipPath>
 
-  <g mask="url(#round)">
+  <g clip-path="url(#round)">
     <rect width="{{=it.widths[0]}}" height="18" fill="{{=it.escapeXml(it.colorA||"#555")}}"/>
     <rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="18" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
     <rect width="{{=it.widths[0]+it.widths[1]}}" height="18" fill="url(#smooth)"/>