search

zenozeng / svgcanvas

Draw on SVG using Canvas's 2D Context API
MIT License
66 stars 19 forks source link

clearRect改进的小建议 #31

Open jerry-TangHao opened 1 year ago

jerry-TangHao commented 1 year ago

image

clearRect 放大后出现了一点错位， 我测试的canvas是允许透明的， clearRect 清空的区域是否应该也是透明的

node-canvas 这个库生成的svg效果挺好的 看看能否为你的改进提供一些帮助

image image

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
<defs>
<filter id="filter-remove-color-and-invert-alpha" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1 1"/>
</filter>
<filter id="filter-0" x="0%" y="0%" width="100%" height="100%">
<feImage xlink:href="#compositing-group-1" result="source" x="0" y="0" width="120" height="120"/>
<feImage xlink:href="#compositing-group-2" result="destination" x="0" y="0" width="120" height="120"/>
<feComposite in="source" in2="destination" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" color-interpolation-filters="sRGB"/>
</filter>
<filter id="filter-1" x="0%" y="0%" width="100%" height="100%">
<feImage xlink:href="#compositing-group-4" result="source" x="0" y="0" width="120" height="120"/>
<feImage xlink:href="#compositing-group-5" result="destination" x="0" y="0" width="120" height="120"/>
<feComposite in="source" in2="destination" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" color-interpolation-filters="sRGB"/>
</filter>
<g>
<g id="glyph-0-0">
<path d="M 3.75 0 L 3.75 -22.5 L 26.25 -22.5 L 26.25 0 Z M 5.625 -1.875 L 24.375 -1.875 L 24.375 -20.625 L 5.625 -20.625 Z M 5.625 -1.875 "/>
</g>
<g id="glyph-0-1">
<path d="M -0.148438 0 L 7.207031 -21.8125 L 10.78125 -21.8125 L 18.132812 0 L 15.074219 0 L 13.09375 -6.09375 L 4.761719 -6.09375 L 2.78125 0 Z M 12.289062 -8.570312 L 8.921875 -18.851562 L 5.566406 -8.570312 Z M 12.289062 -8.570312 "/>
</g>
<g id="glyph-0-2">
<path d="M 17.007812 -6.695312 C 17.003906 -5.609375 16.796875 -4.652344 16.390625 -3.824219 C 15.976562 -2.992188 15.425781 -2.308594 14.734375 -1.773438 C 13.914062 -1.125 13.035156 -0.667969 12.101562 -0.402344 C 11.160156 -0.132812 9.949219 0 8.46875 0 L 2.210938 0 L 2.210938 -21.8125 L 8 -21.8125 C 9.546875 -21.808594 10.710938 -21.757812 11.492188 -21.65625 C 12.265625 -21.554688 13.011719 -21.3125 13.726562 -20.933594 C 14.503906 -20.511719 15.074219 -19.960938 15.4375 -19.285156 C 15.796875 -18.601562 15.976562 -17.804688 15.980469 -16.890625 C 15.976562 -15.863281 15.707031 -14.945312 15.167969 -14.136719 C 14.625 -13.324219 13.875 -12.6875 12.921875 -12.230469 L 12.921875 -12.113281 C 14.214844 -11.757812 15.222656 -11.117188 15.9375 -10.1875 C 16.648438 -9.253906 17.003906 -8.089844 17.007812 -6.695312 Z M 12.964844 -16.480469 C 12.960938 -17.003906 12.871094 -17.460938 12.699219 -17.847656 C 12.519531 -18.234375 12.238281 -18.539062 11.851562 -18.765625 C 11.378906 -19.027344 10.855469 -19.1875 10.28125 -19.246094 C 9.703125 -19.304688 8.90625 -19.335938 7.894531 -19.335938 L 5.113281 -19.335938 L 5.113281 -12.949219 L 8.40625 -12.949219 C 9.3125 -12.949219 9.980469 -12.992188 10.414062 -13.085938 C 10.839844 -13.175781 11.285156 -13.371094 11.75 -13.667969 C 12.183594 -13.949219 12.496094 -14.320312 12.683594 -14.78125 C 12.867188 -15.238281 12.960938 -15.804688 12.964844 -16.480469 Z M 13.988281 -6.578125 C 13.984375 -7.394531 13.867188 -8.070312 13.636719 -8.605469 C 13.398438 -9.136719 12.925781 -9.589844 12.21875 -9.960938 C 11.753906 -10.203125 11.253906 -10.359375 10.714844 -10.429688 C 10.171875 -10.496094 9.402344 -10.527344 8.40625 -10.53125 L 5.113281 -10.53125 L 5.113281 -2.476562 L 7.46875 -2.476562 C 8.738281 -2.472656 9.738281 -2.53125 10.472656 -2.652344 C 11.199219 -2.765625 11.84375 -3.015625 12.40625 -3.398438 C 12.949219 -3.777344 13.351562 -4.207031 13.605469 -4.695312 C 13.859375 -5.175781 13.984375 -5.804688 13.988281 -6.578125 Z M 13.988281 -6.578125 "/>
</g>
<g id="glyph-0-3">
<path d="M 10.738281 0.394531 C 9.308594 0.390625 7.996094 0.15625 6.800781 -0.320312 C 5.601562 -0.796875 4.570312 -1.511719 3.707031 -2.460938 C 2.835938 -3.40625 2.160156 -4.585938 1.683594 -6.003906 C 1.203125 -7.417969 0.964844 -9.042969 0.96875 -10.882812 C 0.964844 -12.707031 1.199219 -14.300781 1.664062 -15.660156 C 2.125 -17.015625 2.800781 -18.195312 3.691406 -19.203125 C 4.558594 -20.175781 5.585938 -20.921875 6.78125 -21.4375 C 7.96875 -21.949219 9.304688 -22.207031 10.78125 -22.207031 C 11.511719 -22.207031 12.195312 -22.152344 12.835938 -22.042969 C 13.472656 -21.933594 14.066406 -21.796875 14.617188 -21.636719 C 15.082031 -21.484375 15.5625 -21.300781 16.058594 -21.085938 C 16.550781 -20.863281 17.039062 -20.621094 17.519531 -20.359375 L 17.519531 -16.859375 L 17.285156 -16.859375 C 17.03125 -17.089844 16.703125 -17.375 16.304688 -17.707031 C 15.902344 -18.039062 15.414062 -18.367188 14.839844 -18.691406 C 14.28125 -18.992188 13.675781 -19.238281 13.019531 -19.4375 C 12.363281 -19.628906 11.605469 -19.726562 10.75 -19.730469 C 9.820312 -19.726562 8.941406 -19.539062 8.113281 -19.160156 C 7.28125 -18.777344 6.554688 -18.214844 5.933594 -17.476562 C 5.3125 -16.730469 4.832031 -15.796875 4.496094 -14.675781 C 4.152344 -13.550781 3.984375 -12.285156 3.984375 -10.882812 C 3.984375 -9.382812 4.164062 -8.097656 4.527344 -7.023438 C 4.886719 -5.941406 5.378906 -5.03125 6.007812 -4.292969 C 6.609375 -3.566406 7.324219 -3.019531 8.144531 -2.65625 C 8.964844 -2.289062 9.832031 -2.109375 10.75 -2.109375 C 11.589844 -2.109375 12.367188 -2.210938 13.078125 -2.417969 C 13.789062 -2.621094 14.421875 -2.878906 14.984375 -3.195312 C 15.515625 -3.492188 15.980469 -3.804688 16.375 -4.125 C 16.761719 -4.441406 17.070312 -4.710938 17.300781 -4.9375 L 17.519531 -4.9375 L 17.519531 -1.480469 C 17.039062 -1.25 16.585938 -1.035156 16.164062 -0.832031 C 15.738281 -0.628906 15.222656 -0.429688 14.617188 -0.234375 C 13.980469 -0.03125 13.390625 0.125 12.851562 0.234375 C 12.304688 0.339844 11.601562 0.390625 10.738281 0.394531 Z M 10.738281 0.394531 "/>
</g>
</g>
<g id="compositing-group-0" transform="translate(10, 10)">
<rect x="-10" y="-10" width="120" height="120" fill="rgb(0%, 0%, 0%)" fill-opacity="0"/>
<path fill-rule="nonzero" fill="rgb(100%, 100%, 100%)" fill-opacity="1" d="M 0 0 L 10 0 L 10 10 L 0 10 Z M 0 0 "/>
</g>
<mask id="mask-0">
<use xlink:href="#compositing-group-0"/>
</mask>
<mask id="mask-1">
<use xlink:href="#compositing-group-0" filter="url(#filter-remove-color-and-invert-alpha)"/>
</mask>
<g id="compositing-group-1" mask="url(#mask-0)">
<g transform="translate(10, 10)">
</g>
</g>
<g id="compositing-group-2" mask="url(#mask-1)">
<g transform="translate(10, 10)">
<rect x="-10" y="-10" width="120" height="120" fill="rgb(0%, 0%, 0%)" fill-opacity="1"/>
<g fill="rgb(100%, 100%, 100%)" fill-opacity="1">
<use xlink:href="#glyph-0-1" x="30" y="29.999023"/>
<use xlink:href="#glyph-0-2" x="47.988281" y="29.999023"/>
<use xlink:href="#glyph-0-3" x="65.81543" y="29.999023"/>
</g>
</g>
</g>
<g id="compositing-group-3" transform="translate(10, 10)">
<rect x="-10" y="-10" width="120" height="120" fill="rgb(0%, 0%, 0%)" fill-opacity="0"/>
<path fill-rule="nonzero" fill="rgb(100%, 100%, 100%)" fill-opacity="1" d="M 0 0 L 44 0 L 44 44 L 0 44 Z M 0 0 "/>
</g>
<mask id="mask-2">
<use xlink:href="#compositing-group-3"/>
</mask>
<mask id="mask-3">
<use xlink:href="#compositing-group-3" filter="url(#filter-remove-color-and-invert-alpha)"/>
</mask>
<g id="compositing-group-4" mask="url(#mask-2)">
<g transform="translate(10, 10)">
</g>
</g>
<g id="compositing-group-5" mask="url(#mask-3)">
<g transform="translate(10, 10)">
<g filter="url(#filter-0)" transform="translate(-10, -10)">
<rect x="0" y="0" width="120" height="120" fill="rgb(0%, 0%, 0%)" fill-opacity="1"/>
</g>
</g>
</g>
</defs>
<g filter="url(#filter-1)" transform="translate(-10, -10)">
<rect x="0" y="0" width="120" height="120" fill="rgb(0%, 0%, 0%)" fill-opacity="1"/>
</g>
</svg>