SVG ట్రాక్ అట్రిబ్యూట్స్

SVG ట్రాక్ అట్రిబ్యూట్స్

SVG విస్తృత కాస్ట్ లాగ్ అంశాలను అందిస్తుంది. ఈ చాప్టర్లో, మేము ఈ విషయాలను చర్చించాము:

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray

అన్ని కాస్ట్ లాగ్ అంశాలు ప్రతి రకమైన లైన్స్, టెక్స్ట్ మరియు ఎలిమెంట్స్ కిరీట్స్ (ఉదాహరణకు చక్రం) కు వినియోగదారు.

SVG stroke అంశం

stroke క్రమం, పదం లేదా కోడ్ ప్రత్యక్షముల గుండె లేదా కండరాల రంగును నిర్వచించే అంశం:

ఇది SVG కోడ్ ఉంది:

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  

亲自试一试

SVG stroke-width అంశం

stroke-width క్రమం, పదం లేదా కోడ్ ప్రత్యక్షముల గుండె లేదా కండరాల విస్తరణను నిర్వచించే అంశం:

ఇది SVG కోడ్ ఉంది:

<svg height="80" width="300">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  

亲自试一试

SVG stroke-linecap అంశం

stroke-linecap ప్రత్యేక రకమైన ప్రత్యక్ష మూలాలను నిర్వచించే అంశం:

ఇది SVG కోడ్ ఉంది:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  

亲自试一试

SVG stroke-dasharray అంశం

stroke-dasharray స్పందనాలు సృష్టించడానికి వినియోగించే అంశం:

ఇది SVG కోడ్ ఉంది:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  

亲自试一试