মাস্ক সহ এস.জি.জি.কে রাস্টারাইজ করতে পারিনি


0

এই এসভিজি একটি ব্রাউজারে সূক্ষ্মভাবে লোড হয় (ffox, ক্রোম, http://jsfiddle.net/9tT6T/ ), তবে পিএনজি হিসাবে রফতানি করলে ইনস্কেপ এবং ইমেজমেজিক এটি কেবল একটি সাদা আয়তক্ষেত্র হিসাবে রূপান্তর করে। আমি কীভাবে এই এসভিজিটিকে পিএনজি-তে জড়িত করব?

<svg width="138" xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 138 40">
    <mask id="m">
        <rect width="100%" height="100%" fill="white" />
        <g transform="translate(2 30)">
            <path d="m6.12,0 5.88,0 0-2.46-.6,0-2.535-9.21-5.46,0-2.535,9.21-.6,0 0,2.46 5.13,0 0-2.46-.9,0 .24-1.2 2.025,0 .255,1.2-.9,0 0,2.46m-.435-8.235 .15,0 .615,2.985-1.38,0 .615-2.985" />
            <path d="m12.3696-9.21 .66,0 0,6.75-.66,0 0,2.46 4.77,0 0-2.46-.66,0 0-9.21-4.11,0 0,2.46" />
            <path d="m17.5552-5.88 .66,0 0,3.42-.66,0 0,2.46 5.28,0 0-2.46-1.17,0 0-3.42 1.17,0 0-2.46-1.17,0c0-.63 .255-.87 1.035-.87 .735,0 1.47,.075 1.47,.075v-2.355c0,0-.78-.39-2.43-.39-2.205,0-3.495,1.035-3.495,3.54h-.69v2.46" />
            <path d="m28.518,0 4.11,0 0-2.46-.66,0 0-2.46c0-2.415-.945-3.63-4.155-3.63-2.385,0-4.155,.525-4.155,.525v2.58c.99-.225 2.295-.435 3.48-.435 1.125,0 1.38,.3 1.38,.87-3.735,0-5.4,1.02-5.4,2.88 0,1.515 1.065,2.34 2.775,2.34 1.44,0 2.25-.75 2.625-1.23v1.02m0-3.42c0,.645-.33,.96-.915,.96-.57,0-.825-.135-.825-.48 0-.48 .675-.57 1.74-.57v.09" />
            <path d="m41.9899-2.685c-.75,0-.93-.285-.93-.885h-3.3v2.97c0,0 1.815,.81 4.695,.81 3.21,0 4.95-1.29 4.95-3.855 0-2.58-1.935-3.375-4.26-4.125-.615-.195-.93-.3-.93-.645 0-.42 .27-.57 .93-.57 .465,0 .825,.18 .825,.75h3.15v-2.685c0,0-1.485-.96-4.38-.96-3.84,0-5.115,1.38-5.115,3.615 0,2.34 1.44,3.135 4.41,4.245 .705,.255 .87,.465 .87,.735 0,.39-.255,.6-.915,.6" />
            <path d="m47.8481-9.21 .66,0 0,6.75-.66,0 0,2.46 4.77,0 0-2.46-.66,0 0-9.21-4.11,0 0,2.46" />
            <path d="m58.2837,0 4.11,0 0-2.46-.66,0 0-2.46c0-2.415-.945-3.63-4.155-3.63-2.385,0-4.155,.525-4.155,.525v2.58c.99-.225 2.295-.435 3.48-.435 1.125,0 1.38,.3 1.38,.87-3.735,0-5.4,1.02-5.4,2.88 0,1.515 1.065,2.34 2.775,2.34 1.44,0 2.25-.75 2.625-1.23v1.02m0-3.42c0,.645-.33,.96-.915,.96-.57,0-.825-.135-.825-.48 0-.48 .675-.57 1.74-.57v.09" />
            <path d="m66.9288-11.67-4.11,0 0,2.46 .66,0 0,6.75-.66,0 0,2.46 4.11,0 0-1.02c.375,.48 1.185,1.23 2.325,1.23 2.07,0 3.075-1.62 3.075-4.38 0-2.76-1.005-4.38-3.075-4.38-1.14,0-1.95,.75-2.325,1.23v-4.35m1.74,8.25c0,.675-.3,.96-.87,.96-.57,0-.87-.285-.87-.96v-1.5c0-.675 .3-.96 .87-.96 .57,0 .87,.285 .87,.96v1.5" />
            <path d="m83.0515-2.46c-.675,0-1.02-.33-1.02-1.11v-4.53c0-.78 .345-1.11 1.02-1.11 .675,0 1.02,.33 1.02,1.11v4.53c0,.78-.345,1.11-1.02,1.11m5.73-3.375c0-4.38-2.235-6.045-5.73-6.045-3.495,0-5.73,1.665-5.73,6.045 0,4.38 2.235,6.045 5.73,6.045 3.495,0 5.73-1.665 5.73-6.045" />
            <path d="m94.4339,0 4.77,0 0-2.46-.66,0 0-2.46c0-2.505-1.02-3.63-2.655-3.63-1.35,0-2.055,.75-2.535,1.23v-1.02h-4.11v2.46h.66v3.42h-.66v2.46h4.77v-2.46h-.66v-2.46c0-.675 .3-.96 .87-.96 .57,0 .87,.285 .87,.96v2.46h-.66v2.46" />
            <path d="m103.732-8.55c-2.775,0-4.53,1.455-4.53,4.38 0,2.925 1.755,4.38 4.53,4.38 2.385,0 3.735-.75 3.735-.75v-2.4c-.72,.24-1.86,.48-3.18,.48-1.05,0-1.425-.36-1.425-1.08v-.09h4.86v-1.08c0-1.89-.915-3.84-3.99-3.84m0,2.67c.57,0 .87,.285 .87,.96v.09h-1.74v-.09c0-.675 .3-.96 .87-.96" />
        </g>
    </mask>
    <rect width="100%" height="100%" fill="white" mask="url(#m)" />
</svg>

উত্তর:


2

স্পষ্টতই ইনসক্যাপের মুখোশটি একটি গোষ্ঠীতে আবদ্ধ হওয়া দরকার। উপাদানটির বাকী সমস্ত অংশের <g> ... </g>মধ্যে maskউপাদানটির ভিতরে জুড়ুন এবং এটি ইনস্কেপে সঠিকভাবে প্রদর্শন এবং রেন্ডার করবে।

ইমেজম্যাগিক এটি প্রায় সঠিকভাবে গোষ্ঠীর সাথে রেন্ডার করবে তবে এটি স্বচ্ছতাটি এড়িয়ে যায় (সাদা রঙের পরিবর্তে রঙিন পটভূমির আয়তক্ষেত্র দিয়ে এটি ব্যবহার করে দেখুন)। গ্রাফিকস ম্যাজিক পুরো মুখোশটিকে পুরোপুরি উপেক্ষা করবে বলে মনে হচ্ছে এমনকি গোষ্ঠীটি স্থানে রয়েছে।

আপনার চূড়ান্ত লক্ষ্য যদি এগুলি রেন্ডার করতে ইমেজম্যাগিক ব্যবহার করা হয় তবে আমি মনে করি আপনি সম্ভবত মুখোশটি খালি করতে পারেন এবং এর -transparent <color>জন্য সেটিংসটি ব্যবহার করতে পারেন convert

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.