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

[Yazdan 1,703]

سلام

 

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

 

 

 

 

کدهای 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://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url= لینک ها تنها برای اعضای سایت قابل نمایش است.  " 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://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url= لینک ها تنها برای اعضای سایت قابل نمایش است.  " 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);}

 

 

 

 

 

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

 

 

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

 

 

 

[tiger2 185]

چه طوری میشه استفاده کرد ؟

[Yazdan 1,703]

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

 

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

 

موفق باشید.

[کامیار 4]

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

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

 

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

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