رفتن به مطلب

ویژه کد فوق العاده زیبا XRAY (نمایش استخوان کاراکتر) SVG


Yazdan

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

  • مدیریت کل سایت

سلام

 

از تصویر کاملا پیداست کاربرد کد ها . با قرار دادن دایره توسط موس میتونید قسمت مورد نظر رو به صورت Xray مشاهده کنید .

 

1447451031451.png

 

 

 

کدهای HTML

 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">   <rect width="100%" height="100%" fill="#E7E7E8"/>   <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://1go.ir/https://1go.ir/ لینک ها تنها برای اعضای سایت قابل نمایش است.  " width="100%" height="100%" /></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">   <defs>       <clipPath id="mask">           <circle id="mask-circle" cx="50%" cy="50%" r="8%" style="fill: &anchor=ffffff"/>       </clipPath>   </defs>   <g clip-path="url(#mask)">       <rect width="100%" height="100%" fill="#272730"/>       <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://1go.ir/https://1go.ir/ لینک ها تنها برای اعضای سایت قابل نمایش است.  " width="100%" height="100%" />   </g>   <circle id="circle-shadow" cx="50%" cy="50%" r="8%" style="stroke: &anchor=fff; fill: transparent; stroke-width: 5;" /></svg>

 

 

 

کدهای java :

 

/** Noel Delgado | @pixelia_me**/var svgElement = document.querySelector('svg');var maskedElement = document.querySelector('#mask-circle');var circleFeedback = document.querySelector('#circle-shadow');var svgPoint = svgElement.createSVGPoint();function cursorPoint(e, svg) {    svgPoint.x = e.clientX;    svgPoint.y = e.clientY;    return svgPoint.matrixTransform(svg.getScreenCTM().inverse());}function update(svgCoords) {    maskedElement.setAttribute('cx', svgCoords.x);    maskedElement.setAttribute('cy', svgCoords.y);    circleFeedback.setAttribute('cx', svgCoords.x);    circleFeedback.setAttribute('cy', svgCoords.y);}window.addEventListener('mousemove', function(e) {    update(cursorPoint(e, svgElement));}, false);document.addEventListener('touchmove', function(e) {    e.preventDefault();    var touch = e.targetTouches[0];    if (touch) {        update(cursorPoint(touch, svgElement));    }}, false);

 

 

کدهای CSS :

 

html,body {   height: 100%;   margin: 0;}body {   font-family: Monaco;   font-size: 12px;   color: rgba(0,0,0,.7);}svg {   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0;   display: block;   width: 100%;   height: 100%;}div,a {   position: relative;   padding: 1em;}div {   text-shadow: 0 1px 0 rgba(255,255,255,.5);}span {   color: rgba(0,0,0,.4);}a {   color: rgba(255,0,0,.5);}

 

 

 

 

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

موفق و پاینده باشید .

 

 

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیریت کل سایت

فابل رو دانلود بفرمائید .

 

کد کامل html موجود هست .

 

موفق باشید.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

ممنون جالب بود

اس وی جی بهترینه تا ابد

 

اینم دموی انلاینش

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...