SVG <path>

SVG పాత్రీకరణ - <path>

<path> పాత్రీకరణలను నిర్వహించడానికి ఉపయోగిస్తారు.

ఈ ఆదేశాలను పాత్రీకరణ డేటాలో ఉపయోగించవచ్చు:

• M = moveto (చేరుస్తుంది)
• L = lineto (రేఖారేఖాలను చేరుస్తుంది)
• H = horizontal lineto (సమాంతర రేఖారేఖాలను చేరుస్తుంది)
• V = vertical lineto (నిలువు రేఖారేఖాలను చేరుస్తుంది)
• C = curveto (కర్వేటో కర్వేటో)
• S = smooth curveto (స్మోత్త్ కర్వేటో కర్వేటో)
• Q = quadratic Bézier curve (క్వాడ్రాటిక్ బేజెల్ కర్వ్)
• T = smooth quadratic Bézier curveto (స్మోత్త్ క్వాడ్రాటిక్ బేజెల్ కర్వ్ కర్వేటో)
• A = elliptical Arc (ఏలిప్సాకార అర్క్)
• Z = closepath (పాత్రీకరణను మూసివేస్తుంది)

గమనిక: పైన పేర్కొన్న అన్ని ఆదేశాలను చిన్న అక్షరాలతో కూడా ప్రయోగించవచ్చు. పెద్ద అక్షరాలు అబ్సూల్యూట్ లొకేషన్ నిర్దేశిస్తాయి, చిన్న అక్షరాలు రెలేటివ్ లొకేషన్ నిర్దేశిస్తాయి.

ఉదాహరణ 1

ఈ ఉదాహరణలో, పాత్రీకరణలో ప్రారంభం స్థానం 150,0 ఉంది, అప్పటికే అక్కడ నుండి 75,200 స్థానానికి ఒక రేఖను చేరుస్తుంది, అప్పటికే అక్కడ నుండి 225,200 స్థానానికి ఒక రేఖను చేరుస్తుంది, అప్పటికే అక్కడ నుండి 150,0 స్థానానికి పాత్రీకరణను మూసివేస్తుంది.

ఇది SVG కోడ్:

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />

亲自试一试

ఉదాహరణ 2

బేజెల్ కర్వ్స్ (Bézier curves) అనేది అనంతంగా సమస్తరంగా కర్వాలను మోడల్లింగ్ చేయడానికి ఉపయోగిస్తారు. సాధారణంగా, వినియోగదారులు రెండు మూలాలు మరియు ఒకటి లేదా రెండు కంట్రోల్ పాయింట్లు ఎంచుకుంటారు. ఒక కంట్రోల్ పాయింట్ ఉన్న బేజెల్ కర్వ్ అనేది క్వాడ్రాటిక్ బేజెల్ కర్వ్ (quadratic Bézier curve) అని పిలుస్తారు, రెండు కంట్రోల్ పాయింట్లు ఉన్న బేజెల్ కర్వ్ అనేది క్యూబిక్ బేజెల్ కర్వ్ (cubic) అని పిలుస్తారు.

ఈ సాయంత్రం రెండు కన్నడంలో ఒక క్రమానుసంధానం కర్ర పెంచుతుంది, ఎస్ మరియు సి మొదటి మరియు చివరి స్థానాలు, బి నియంత్రణ పాయింట్:}

ఇది SVG కోడ్:

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- 标记相关的点 -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- 给点添加标签 -->
  <g font-size="30" font-family="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>

亲自试一试

很复杂吧？是的！！！由于绘制路径非常复杂，强烈建议使用 SVG 编辑器来创建复杂图形。