SVG katika HTML

Wewe unaweza kuingiza elementi ya SVG kwa kusababisha kwa HTML

Ingiza SVG kwa kusababisha kwa HTML kwa kufikirika

Mfano wa kikuu cha SVG wa kwanza:

Umasababishwa, kivaa kilichoweza kufikirika SVG inasababishwa kwa sababu ya kivaa kilichoweza kufikirika SVG

Hii ni kifaa cha HTML:

<!DOCTYPE html>
<html>
<body>
<h1>My SVG ya kwanza</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Tafadhali tafutane kwa kufikirika

taarifu ya kifaa ya SVG:

  • picha ya SVG inafikia kwa elementi ya <svg>
  • kabla na height ya elementi ya <svg> inaeleza upana na kipimo cha picha ya SVG
  • elementi ya <circle> inatumiwa kufikirika kikuu
  • cx na cy inaeleza kina ya x na y ya kiziko. Ikiwa cx na cy haisababishwi, kiziko kina kina (0, 0)
  • inaangalizi ya r inaeleza upana wa kikuu
  • kabla na stroke-width inayokwenda kushika hali ya taarifu ya mababu ya muundo. Tunasababisha mababu ya kikuu kwa rangi ya kijani ya 4 zilizosababisha kufikirika kama 'kifungu'
  • fill ina setingi ya rangi ya kikuu. Tunasababisha rangi ya kufill kwa rangi ya kijani
  • </svg> Tabia ya Kufungua Matokeo ya SVG

Tahadhari: Kwa sababu SVG inasambazwa na XML, tabia zote lazima zifungwe kwa haki!