search

sapegin / grunt-webfont

SVG to webfont converter for Grunt
MIT License
1.11k stars 210 forks source link

get some issue when the viewbox has an negative number inside #351

Closed KeZhang closed 6 years ago

KeZhang commented 7 years ago

The export font has some height issue when I the svg as follow

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="48px" height="49px" viewBox="-268 11 48 49" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <path d="M-244,59 C-230.745166,59 -220,48.254834 -220,35 C-220,21.745166 -230.745166,11 -244,11 C-257.254834,11 -268,21.745166 -268,35 C-268,48.254834 -257.254834,59 -244,59 Z" id="path-1"></path>
  <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="48" height="48" fill="white">
    <use xlink:href="#path-1"></use>
  </mask>
</defs>
<use id="ready-cycle" stroke="#6DB33F" mask="url(#mask-2)" stroke-width="4" fill="none" xlink:href="#path-1"></use>
<polyline id="check" stroke="#6DB33F" stroke-width="2" fill="none" points="-254 34.9014085 -247.7 42 -234 28"></polyline>
</svg>

but when I remove the viewBox , and add an transform, it works well

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="48px" height="49px" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="translate(268,-11)">
        <defs>
            <path d="M-244,59 C-230.745166,59 -220,48.254834 -220,35 C-220,21.745166 -230.745166,11 -244,11 C-257.254834,11 -268,21.745166 -268,35 C-268,48.254834 -257.254834,59 -244,59 Z"
                  id="path-1"></path>
            <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="48"
                  height="48" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
        </defs>
        <use id="ready-cycle" stroke="#6DB33F" mask="url(#mask-2)" stroke-width="4" fill="none"
             xlink:href="#path-1"></use>
        <polyline id="check" stroke="#6DB33F" stroke-width="2" fill="none"
                  points="-254 34.9014085 -247.7 42 -234 28"></polyline>
    </g>
</svg>
alampros commented 6 years ago

I don't mean to be short, but isn't the easiest solution here just not to use negative values in the viewbox?

As a general rule with fonts, your characters shouldn't exceed their boundaries. Depending on your use case, it might be best to solve this in CSS with negative margin.