Svg

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad3" cx="25%" cy="25%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad4" cx="25%" cy="25%" spreadMethod="reflect">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad5" cx="25%" cy="25%" spreadMethod="repeat">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" stop-opacity="0" />
      <stop offset="100%" stop-color="blue" stop-opacity="1" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad6)" />
</svg>

saalek110 · Feb 15, 2024

SVG Transformations

JavaScript:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" />
  <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 0)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" />
  <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" />
  <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 50)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="20" fill="yellow" />
  <circle cx="50" cy="25" r="20" fill="red" transform="scale(2)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="20" fill="yellow" />
  <circle cx="70" cy="25" r="20" fill="red" transform="scale(1,2)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="20" fill="yellow" />
  <circle cx="50" cy="25" r="20" fill="red" transform="scale(2,1)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="5" width="40" height="40" fill="blue" transform="rotate(45)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" transform="skewX(30)" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" transform="skewY(30)" />
</svg>

saalek110 · Feb 15, 2024

SVG Reference

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

saalek110 · Feb 15, 2024

ساعت عقربه ای با svg

Watch

اجرایش را در لینک بالا ببینید.

در سایت خودش توضیح داده. سایت انگلیسی است.
سالک: من کدها را داخل کد زیر جمع کردم.
یک قسمت اول که css است.
بعدش svg است.
بعدش جاوا اسکریپت است.

در قسمت svg ببینید هر قسمت یک id دارد. همین id ها باعث پیدا کردن توسط جاوا اسکریپت است.
در کدهای پستهای قبل همین تاپیک صفت transform را دیدید، که rotate هم داره.
کدهای جاوا اسکریپت ، از تابع date ساعت را بدست می آورد و عقربه های از جنس svg را به اندازه لازم rotate می کند، یعنی می چرخاند.

پس در برنامه زیر ، به چگونگی svg و جاوا اسکریپت آشنا شدید و دیدید کدهای جاوا اسکریپت چطور صفات svg را تغییر دادند.

JavaScript:

<html>
  <head>
    <title>Watch</title>
    <style>
 
    .hand {
  stroke: #553322;
  stroke-width: 2;
  stroke-linecap: round;
}

.hand--thick {
  stroke-width: 7;
}

.hand--second {
  stroke: yellow;
}

    .hour_marker {
  fill: transparent;
  stroke: #f0f0c9;
  stroke-width: 7;
  stroke-dasharray: 0.2, 4.8;
  stroke-dashoffset: 0.1;
}

.minute_marker {
  fill: transparent;
  stroke: #0f0e0e;
  stroke-width: 7;
  stroke-dasharray: 0.2, 0.8;
  stroke-dashoffset: 0.1;
}
    </style>
  </head>

  <body>

    <svg width="800" height="800" viewBox="-100 -100 200 200">
      <circle class="minute_marker" r="90" pathLength="60" />
      <circle class="hour_marker" r="90" pathLength="60" />

      <g id="hour_hand">
        <line class="hand" x1="0" y1="0" x2="0" y2="-50" />
        <line class="hand hand--thick" x1="0" y1="-12" x2="0" y2="-50" />
      </g>

      <g id="minute_hand">
        <line class="hand" x1="0" y1="0" x2="0" y2="-80" />
        <line class="hand hand--thick" x1="0" y1="-12" x2="0" y2="-80" />
      </g>

      <g id="second_hand">
        <line class="hand hand--second" x1="0" y1="12" x2="0" y2="-80" />
      </g>
    </svg>


<script>
const hoursElement = document.getElementById("hour_hand");
const minutesElement = document.getElementById("minute_hand");
const secondsElement = document.getElementById("second_hand");

function animate() {
  const date = new Date();

  const hour = date.getHours() + date.getMinutes() / 60;
  const minute = date.getMinutes() + date.getSeconds() / 60;
  const second = date.getSeconds() + date.getMilliseconds() / 1000;

  hoursElement.setAttribute("transform", `rotate(${(360 / 12) * hour})`);
  minutesElement.setAttribute("transform", `rotate(${(360 / 60) * minute})`);
  secondsElement.setAttribute("transform", `rotate(${(360 / 60) * second})`);

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

</script>

  </body>
</html>

SVG + JavaScript Tutorial – How to Code an Animated Watch

Since SVG images can be inlined in HTML, we can manipulate them with JavaScript. This means that we can animate parts of an image from code, make it interactive, or turn things around and generate graphics from data. In this example, we are going to create a watch. We will

www.freecodecamp.org

saalek110 · Feb 15, 2024

برنامه پست قبل را من مقداری ساده ترش کردم...
و به جای ساعت ، یک ماشین درست کردم که با مقدار ثانیه راه می رود.

my car

در لینک بالا ، ببینید ماشین من راه می رود...آرام آرام می رود به راست.

ماشین من ۳ تا مربع آبی دارد و دو تا دایره سیاه.

JavaScript:

<html>
  <head>
    <title>my car</title>

  </head>

  <body>
<p>hi</p>

    <svg width="800" height="800" viewBox="-100 -100 200 200">
 
      <g id="car">
        <rect   x="5" y="5" width="5" height="5" fill="blue" />
        <rect   x="7" y="10" width="5" height="5" fill="blue" />
        <rect   x="2" y="10" width="5" height="5" fill="blue" />
<circle cx="5" cy="17" r="2" fill="black" />
<circle cx="10" cy="17" r="2" fill="black" />
      </g>

    </svg>


<script>
const car = document.getElementById("car");

function animate() {
  const date = new Date();

  const second = date.getSeconds() + date.getMilliseconds() / 1000;

car.setAttribute("transform", `translate(${ second})`);

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

</script>

  </body>
</html>

دیگه برنامه css نداره ، پس svg اون ساده تره...
یک شی داریم که از ۵ تا شکل تشکیل شده ، همون ۳ مربع و ۲ دایره..
در کدهای جاوااسکریپت هم فقط با یک شی کار کرده... فکر کنم این طوری ساده تر و قابل فهم تر باشه.
یک نیمچه بازی هم ساخته شد.

شما می توانید علاوه بر این ۵ شکل ، چیزهای دیگری به ماشین بیافزایید تا زیباتر شود..
همچنین می توانید ماشین های دیگری بسازید.

حتما لازم نیست با زمان ماشین حرکت کند. کمی که جاوا اسکریپت یاد بگیرید می توانید به جای ثانیه از چیزهای دیگر استفاده کنید. مثلا یک حلقه بسازید.

به جای چرخش در اون ساعت ، من جابجایی را استفاده کردم. یعنی translate.

کد بالا را می توانید در فایلی با پسوند html ذخیره کنید و با بروسر خود باز کنید. اجرا میشه. و نیاز به سرور نداره.

saalek110 · Feb 15, 2024

my car

ماشین بالا خوش ریخت تر شد و سرعتش بیشتر شد.

JavaScript:

<html>
  <head>
    <title>my car</title>

  </head>

  <body>
<p>hi</p>

    <svg width="800" height="800" viewBox="-100 -100 200 200">
 
      <g id="car">
        <rect   x="20" y="5" width="10" height="5" fill="blue" />
        <rect   x="15" y="10" width="10" height="5" fill="blue" />
        <rect   x="25" y="10" width="10" height="5" fill="blue" />
<circle cx="20" cy="15" r="2" fill="black" />
<circle cx="30" cy="15" r="2" fill="black" />
      </g>

    </svg>


<script>
const car = document.getElementById("car");

function animate() {
  const date = new Date();

  const second = date.getSeconds() + date.getMilliseconds() / 1000;

car.setAttribute("transform", `translate(${ (5*second)-120})`);

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

</script>

  </body>
</html>

ثانیه را می بینید در ۵ ضرب کردم و منهای ۱۲۰ کردم تا ماشین بیاید داخل صفحه و اجزای ماشین را کمی جابجا کردم تا ریخت بهتری پیدا کند.