رفتن به مطلب

آموزش بکار بردن SVG در HTML


پست های پیشنهاد شده

سلام

یه فایل SVG خودم ساختم ولی نمی دونم چطور باید در کد نویسی فراخوانی و ازش به عنوان آیکون فونت استفاده کنم.

ممنون میشم دوشتان آموزشش را بزارند

لینک به ارسال

دقیقا مثل عکس های معمولی :


<img src="image.svg" />

برای تعیین ارتفاع و عرش هم میتونی بهش استایل بدی

لینک به ارسال

دقیقا مثل عکس های معمولی :


<img src="image.svg" />

برای تعیین ارتفاع و عرش هم میتونی بهش استایل بدی

اینکار را کردم ولی رنگش تغییر نمیکنه .

می خوام بتونم بهش رنگ هم بدم و در مواقعی مثلا در آندازه خاصی رنگش تغییر کنه.

با این رنگش چه کنم؟؟؟

لینک به ارسال

از خوصوصیت fill استفاده کنید ، مثلا


fill: #CFCFCF;

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

من اینطوری استفاد ه کردم نشد :


.iconfont img{
color:#DF3E41;
fill: #CFCFCF;
}
.iconfont{
width:200px;
height:100px;
color:#DF3E41;
fill: #CFCFCF;
}

لینک به ارسال

در داخل تگ های اصلی فایل svg کلاس p-sv را به تگ patch بدید و اینطور استفاده کنید :


.p-sv{
fill: #CFCFCF;}

لینک به ارسال

در داخل تگ های اصلی فایل svg کلاس p-sv را به تگ patch بدید و اینطور استفاده کنید :


.p-sv{
fill: #CFCFCF;}

کاری که من کردم :


<div class="iconfont">
<img class="p-sv" src="<?php bloginfo('template_url'); ?>/images/svg/road41.svg" >
</div>

.iconfont{
width:200px;
height:100px;
color:#DF3E41;

}
.p-sv{
fill: #ED1014;

}

ولی بازم نشد

لینک به ارسال

فایل عکس svg را باز و هر چه تگ patch هست کلاس p-sv بهش بدید :


<svg ...>
<ellipse .../>
<path class="p-sv" .../>
</svg>

لینک به ارسال
  • 5 سال بعد...
در 2 ساعت قبل، سحر12 گفته است :

سلام من دنبال کدی میگردم که با circle svgتو Html بتونم ایکن twitter طراحی کنم میشه کمکم کنید

سلام به انجمن خوش آمدید

بهتر بود یک تایپیک جدید ایجاد می کردید

نمیدونم چرا راه سخت رو استفاده میکنید با fontawesome هم میتونید اینکارو انجام بدید

https://www.w3schools.com/html/html5_svg.asp
https://www.w3schools.com/graphics/svg_examples.asp
https://www.w3schools.com/graphics/svg_intro.asp
// نمونه ها
https://codepen.io/tag/svg
https://codepen.io/elliz/pen/BpqVzG

 

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...