Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is the trick , you need to convert all points generated in your svg file to ratio that is equal the point path divided by mask dimension .</p> <p>For easier explaination , i have made a quick tool to help designers convert their svg into a mask that is compatible with firefox , you can see a live demo on my website ( <a href="http://www.prollygeek.com" rel="nofollow">http://www.prollygeek.com</a> ) , for example the facebook logo , and twitter logo are just masks , and here is the tool that you can use to convert your svg to a mask: <a href="http://prollygeek.com/svg-mask/" rel="nofollow">http://prollygeek.com/svg-mask/</a></p> <p>for example:</p> <pre><code>&lt;mask id="fb" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"&gt; &lt;path d="M236.626,120.827v27.295h-14.851c-4.416,0-7.225,1.204-8.63,3.612c-1.003,1.604-1.405,4.415-1.405,8.229v12.442h25.287l-3.01,27.494H211.74v79.273h-32.712v-79.273h-16.055v-27.494h16.055v-16.457c0-16.858,5.82-27.695,17.259-32.311 c5.619-2.208,10.436-2.811,15.453-2.811H236.626z"/&gt; </code></pre> <p></p> <p>will be turned to:</p> <pre><code>&lt;mask id="fb" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"&gt; &lt;path d="M0.59,0.3v0.0675h-0.035c-0.01,0-0.0175,0.0025-0.02,0.0075c-0.0025,0.0025-0.0025,0.01-0.0025,0.02v0.03h0.0625l-0.0075,0.0675H0.5275v0.1975h-0.08v-0.1975h-0.04v-0.0675h0.04v-0.04c0-0.04,0.0125-0.0675,0.0425-0.08c0.0125-0.005,0.025-0.005,0.0375-0.005H0.59z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"/&gt; </code></pre> <p></p> <p>Please dont forget to add this attribute style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"</p> <p>and fill with any color , it doesnt matter.</p> <p>afterwards link your mask to the css element you desire:</p> <p>for example:</p> <pre><code> mask:url(images/fb.svg#fb); </code></pre> <p>the calculator is free to use , but please dont copy or publish anywhere else. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload