نمایش اطلاعات در یک SVG طراحی شده

2/6/2017 MVC
1338

استفاد هاز SVG  برای طراحی وب دارای مزایا و معایبی است ، در ایم مطلب قرار نیست در این خصوص صحبت کنیم ، در یک پروژه قرار بود قیمت یک کالا در درون شکل نا منظم هندسی نمایش داده شود و این شکل هندسی برای تمامی محصولات یکسان بود اما قیمت محصولات تک تک از بانک اطلاعاتی خوانده میشد برا یهمین نیاز بود با در نظر گرفتن واکنش گرا بودن SVG  ها اعداد را در در درون آن ها جایگذاری کنم 

 

برا ی این کار ابتدا یکی از این اشکام منظم را توسط فتوشاپ تبدیل به SVG  کردم ، یک نکات جالب این بود که خود فتو شاپ، شکل را به صورت مجزا تبدیل به SvG  کرد به این صورت شکل هندسی جدا و متن فارسی که روی آن قرار داده بودم نیز جدا کرده بود به این صورت

    <svg xmlns="http://www.w3.org/2000/svg"  class="pricing" xmlns:xlink="http://www.w3.org/1999/xlink" width="172" height="172" viewBox="0 0 172 172">
                                        <defs>
                                            <style >
                                                .cls-1 {
                                                    font-size: 38px;
                                                }

                                                .cls-1, .cls-2 {
                                                    fill: #5d1338;
                                                    font-family: "B Farnaz";
                                                }

                                                .cls-2 {
                                                    font-size: 30px;
                                                }
                                            </style>
                                        </defs>
                                        <image id="Layer_0"  class="" data-name="Layer 0" width="172" height="172" xlink:href="data:img/png;base64,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" />
                                        <text id="تومان" class="cls-1" x="125" y="115">تومان</text>
                                        <text id="_129_000" data-name="129،000" class="cls-2" x="112.333" y="81.333">@string.Format("{0:0.}", item.Price)</text>
                                        </svg>

 همانطور که میبینید متن و شکل هندسی به صورت تفکیک شده چیده شد ه اند

و با در نظر گرفتن مطلب قیمت ، ما قیمت را هم به صورت اعداد بدون نمایش دو صفر اضافه نمایش دادیم