Π Π°Π·Π½ΠΎΠ΅

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ°: ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π±Π΅Π· ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π° для рисованного Π²ΠΈΠ΄Π΅ΠΎ

Π—Π°Π»ΠΈΠ²ΠΊΠ° ΠΈ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° – SVG

  • Β« ΠŸΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ
  • Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ Β»

Π•ΡΡ‚ΡŒ нСсколько способов Ρ€Π°ΡΠΊΡ€Π°ΡΠΈΡ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ SVG (Π² Ρ‚.Ρ‡. с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°), ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΈΠ½Π»Π°ΠΉΠ½-CSS, Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ CSS-ΡΠ΅ΠΊΡ†ΠΈΡŽ, ΠΈΠ»ΠΈ внСшний Ρ„Π°ΠΉΠ» CSS. Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ SVG, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ встрСтитС Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ встроСнный CSS, ΠΎΠ΄Π½Π°ΠΊΠΎ прСимущСства ΠΈ нСдостатки Π΅ΡΡ‚ΡŒ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°.

Раскраска (Painting)

Основная раскраска ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ сдСлана установкой Π΄Π²ΡƒΡ… свойств Π½Π° Π½ΠΎΠ΄Π΅ – fill ΠΈ stroke. Fill – устанавливаСт Ρ†Π²Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, Π° stroke Π·Π°Π΄Π°Ρ‘Ρ‚ Ρ†Π²Π΅Ρ‚ Π»ΠΈΠ½ΠΈΠΈ, которая рисуСтся Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS-наимСнования Ρ†Π²Π΅Ρ‚ΠΎΠ², Ρ‡Ρ‚ΠΎ ΠΈ Π² HTML – названия Ρ†Π²Π΅Ρ‚ΠΎΠ² (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, red), rgb-значСния, hex-значСния, rgba-значСния ΠΈ Ρ‚.Π΄.

 <rect x="10" y="10" stroke="blue" fill="purple"
       fill-opacity="0.5" stroke-opacity="0.8"/>

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΠ΅ ΠΈ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ΅ ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π² SVG. Π˜Ρ… ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ управляСтся Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ

fill-opacity, stroke-opacity.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π—Π°ΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π² Firefox 3+ допустимы rgba-значСния ΠΈ это Π΄Π°Ρ‘Ρ‚ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ эффСкт прозрачности, Π½ΠΎ для совмСстимости с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ просмотрщиками часто Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ/Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ. Если Π²Ρ‹ ΡƒΠΊΠ°ΠΆΠ΅Ρ‚Π΅ ΠΈ rgba-Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ fill-opacity/stroke-opacity – Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΎΠ±Π°.

Обводка (Stroke)

ΠšΡ€ΠΎΠΌΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… свойств ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ, Π΅ΡΡ‚ΡŒ нСсколько Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… способом ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>

Бвойство stroke-width

опрСдСляСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ. Π¨Ρ‚Ρ€ΠΈΡ…ΠΈ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Ρ€ΠΈΡΡƒΡŽΡ‚ΡΡ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΏΡƒΡ‚ΠΈ. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅ ΠΏΡƒΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΡ‘Π½ Ρ€ΠΎΠ·ΠΎΠ²Ρ‹ΠΌ, Π° ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° – Ρ‡Π΅Ρ€Π½Ρ‹ΠΌ.

Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, Π²Π»ΠΈΡΡŽΡ‰ΠΈΠΉ Π½Π° ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ – свойство stroke-linecap. ДСмонстрируСтся Π²Ρ‹ΡˆΠ΅. Бвойство управляСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½Ρ†ΠΎΠ² Π»ΠΈΠ½ΠΈΠΉ.

Π•ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… значСния для stroke-linecap:

  • butt ΠΎΠ±Ρ€Ρ‹Π²Π°Π΅Ρ‚ линию ΠΏΠΎΠ΄ прямым ΡƒΠ³Π»ΠΎΠΌ ΠΊ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡŽ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΈ Π΄Π΅Π»Π°Π΅Ρ‚ это сразу ΠΏΠΎ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠΈ Π»ΠΈΠ½ΠΈΠΈ.
  • square Π² основном дСйствуСт Ρ‚Π°ΠΊΠΆΠ΅, Π½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ растягиваСт ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ ΠΏΠΎ краям ΠΏΡƒΡ‚ΠΈ. Π”Π»ΠΈΠ½Π°, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ продлСваСтся ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° – это ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ значСния stroke-width.
  • round Π·Π°Π΄Π°Ρ‘Ρ‚ Π·Π°ΠΊΡ€ΡƒΠ³Π»Ρ‘Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ ΠΏΠΎ краям ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ. Радиус этих ΠΊΡ€ΠΈΠ²Ρ‹Ρ… Ρ‚Π°ΠΊΠΆΠ΅ управляСтся ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ stroke-width.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ stroke-linejoin, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ Π΄Π²ΡƒΡ… сСгмСнтов Π»ΠΈΠ½ΠΈΠΈ.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1. 1">
  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
</svg>

КаТдая ΠΈΠ· этих ΠΏΠΎΠ»ΠΈΠ»ΠΈΠ½ΠΈΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π° сСгмСнта. Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅, Π³Π΄Π΅ ΠΎΠ½ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‚ΡΡ, управляСтся Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ stroke-linejoin. Π•ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… значСния для этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°:

  • miter ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ линию ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ дальшС Π΅Ρ‘ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ СдинствСнный ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΉ ΡƒΠ³ΠΎΠ».
  • round создаёт Π·Π°ΠΊΡ€ΡƒΠ³Π»Ρ‘Π½Π½Ρ‹ΠΉ сСгмСнт Π»ΠΈΠ½ΠΈΠΈ
  • bevel создаёт Π½ΠΎΠ²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» для ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π² ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ ΠΌΠ΅ΠΆΠ΄Ρƒ двумя сСгмСнтами

НаконСц, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ Π² ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ΅, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ stroke-dasharray.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
  <path d="M 10 75 L 190 75" stroke="red"
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>

Π’ качСствС Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚

stroke-dasharray ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ чисСл, Ρ€Π°Π·Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… запятой.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π—Π°ΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ ΠΏΡƒΡ‚Π΅ΠΉ, эти числа Π”ΠžΠ›Π–ΠΠ« Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ запятыми (ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ).

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ число опрСдСляСт Π΄Π»ΠΈΠ½Ρƒ ΡˆΡ‚Ρ€ΠΈΡ…Π°, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ – Π΄Π»ΠΈΠ½Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ ΡˆΡ‚Ρ€ΠΈΡ…Π°ΠΌΠΈ. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅, Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π΄ΡƒΠ΅Ρ‚ Π·Π°Π»ΠΈΠ²ΠΊΡƒ ΡˆΡ‚Ρ€ΠΈΡ…ΠΎΠΌ Π² 5 пиксСлСй, Π·Π°Ρ‚Π΅ΠΌ 5 пустых пиксСлСй ΠΏΠ΅Ρ€Π΅Π΄ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΡˆΡ‚Ρ€ΠΈΡ…ΠΎΠΌ Π² 5 пиксСлСй. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ большС чисСл, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ систСму ΡˆΡ‚Ρ€ΠΈΡ…ΠΎΠ². Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π·Π°Π΄Π°Π½ΠΎ 3 числа ΠΈ Π² этом случаС Ρ€Π΅Π½Π΄Π΅Ρ€ Π±Π΅Ρ€Ρ‘Ρ‚ эти числа Π΄Π²Π°ΠΆΠ΄Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‡Ρ‘Ρ‚Π½Ρ‹ΠΉ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½. Π’.ΠΎ. ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ отобраТаСтся 5 Π·Π°ΠΊΡ€Π°ΡˆΠ΅Π½Π½Ρ‹ΠΌΠΈ, 10 пустыми, 5 Π·Π°ΠΊΡ€Π°ΡˆΠ΅Π½Π½Ρ‹ΠΌΠΈ ΠΈ Π·Π°Ρ‚Π΅ΠΌ Π΅Ρ‰Ρ‘ Ρ€Π°Π· 5 пустыми, 10 Π·Π°ΠΊΡ€Π°ΡˆΠ΅Π½Π½Ρ‹ΠΌΠΈ, 5 пустыми “пиксСлями”. Π—Π°Ρ‚Π΅ΠΌ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ повторяСтся.

Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ stroke ΠΈ fill свойства: fill-rule, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСт ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ слоТныС Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ пСрСсСчСния Π²Π½ΡƒΡ‚Ρ€ΠΈ сСбя;

stroke-miterlimit, which determines if a stroke should draw miters ΠΈ stroke-dashoffset, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π³Π΄Π΅ начинаСтся dash-array Π² Π»ΠΈΠ½ΠΈΠΈ (позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ смСщСниС ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠΉ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния)

Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ установкС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS для стилизации Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΈ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ. НС всС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ установлСны Ρ‡Π΅Ρ€Π΅Π· CSS. Но Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ взаимодСйствия с раскраской ΠΈ Π·Π°Π»ΠΈΠ²ΠΊΠΎΠΉ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ доступны, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ fill, stroke, stroke-dasharray ΠΈ Ρ‚.Π΄. ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π°Π½Ρ‹ этим способом, Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹, ΠΈ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Ρ‹, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Атрибуты Π²Ρ€ΠΎΠ΄Π΅ width, height ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄ для ΠΏΡƒΡ‚Π΅ΠΉ SVG Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ установлСны Ρ‡Π΅Ρ€Π΅Π· CSS. ΠŸΡ€ΠΎΡ‰Π΅ всСго просто ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡƒΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ доступно, Π° Ρ‡Ρ‚ΠΎ Π½Π΅Ρ‚.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: БпСцификация SVG строго раздСляСт Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π½Π° свойства ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹. ΠŸΠ΅Ρ€Π²Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ‹ Ρ‡Π΅Ρ€Π΅Π· CSS, Π° Π²Ρ‚ΠΎΡ€Ρ‹Π΅ – Π½Π΅Ρ‚.

CSS ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style:

 <rect x="10" y="10"/>

ΠΈΠ»ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠΌΠ΅Ρ‰Ρ‘Π½ Π² ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ ΡΡ‚ΠΈΠ»Π΅Π²ΡƒΡŽ ΡΠ΅ΠΊΡ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅. ВмСсто отобраТСния Ρ‚Π°ΠΊΠΎΠΉ сСкции Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ <head>, ΠΊΠ°ΠΊ это дСлаСтся Π² HTML, ΠΎΠ½Π° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Π·ΠΎΠ½Ρƒ <defs>, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΡƒΡŽ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. Π—Π΄Π΅ΡΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ появятся сами Π² SVG, Π½ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <style type="text/css"><![CDATA[
       #MyRect {
         stroke: black;
         fill: red;
       }
    ]]></style>
  </defs>
  <rect x="10" y="10"/>
</svg>

ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ стилСй Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ Π·ΠΎΠ½Ρƒ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‰Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ свойств ΠΊ большим Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌ элСмСнтов. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Ρ‰ΠΈ Ρ‚ΠΈΠΏΠ° псСвдоклассов навСдСния для создания эффСктов пСрСворачивания:

 #MyRect:hover {
   stroke: black;
   fill: blue;
 }

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» стилСй для Π²Π°ΡˆΠΈΡ… CSS-ΠΏΡ€Π°Π²ΠΈΠ» Ρ‡Π΅Ρ€Π΅Π· ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ XML-stylesheet синтаксис:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect/>
</svg>

Π³Π΄Π΅ style.css выглядит ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ

#MyRect {
  fill: red;
  stroke: black;
}
  • Β« ΠŸΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ
  • Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ Β»

Last modified:

28 ΠΎΠΊΡ‚. 2022 Π³., by MDN contributors

HUD – Обводки для Π²Π°ΡˆΠΈΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ/фистов | BLASTHACK