SVG => निशान

वाक्य - विन्यास

<marker व्यूबॉक्स = " xy चौड़ाई ऊंचाई " RefX = " xoffset " refY = " yoffset " ओरिएंट = " ओरिएंटेशन " ... वैकल्पिक पैरामीटर >
... मार्कर ड्राइंग करने वाले तत्व ...
</marker >
< elementname मार्कर-प्रारंभ = "url (# मार्कर )" /> एक तत्व की शुरुआत के लिए एक मार्कर लागू होता है
< elementname मार्कर-मध्य = "url (# मार्कर )" /> एक तत्व के एक खंड के बीच में एक मार्कर लागू होता है
< elementname मार्कर-एंड = "url (# मार्कर )" /> एक तत्व के अंत में एक मार्कर लागू होता है
मार्कर <line> , <polyline> , <polygon> और <path> तत्वों पर लागू किए जा सकते हैं

पैरामीटर

पैरामीटर	विवरण
viewBox	मार्कर को खींचने वाले तत्वों के लिए इकाई प्रणाली को निर्दिष्ट करता है
REFX	मार्कर ड्राइंग के लिए समन्वय प्रणाली के एक्स अक्ष से दूरी को डिफ़ॉल्ट ड्राइंग बिंदु से ऑफसेट किया जाना चाहिए। चूक ०।
refY	मार्कर ड्राइंग के लिए समन्वय प्रणाली की y अक्ष दूरी डिफ़ॉल्ट ड्राइंग बिंदु से ऑफसेट होना चाहिए। चूक ०।
पूरबी	मान `auto` या `angle in degrees` और मार्कर पर लागू रोटेशन को निर्दिष्ट करते हैं। यह अन्य सभी समन्वित समायोजन किए जाने के बाद लागू किया जाता है (व्यूबॉक्स, प्रिजर्वएस्पेक्ट्रियो और रिफक्स, रिफवाई)। डिफ़ॉल्ट के लिए 0. `auto` के लिए कोण की गणना जटिल है - विवरण के लिए एसवीजी कल्पना देखें।
markerUnits	`strokeWidth` या `userSpaceOnUse` । `strokeWidth` लिए `strokeWidth` ।
markerWidth	मार्करों में मार्कर की चौड़ाई। 3 से चूक।
markerHeight	मार्करों में मार्कर की ऊंचाई। 3 से चूक

टिप्पणियों

स्क्रिप्टिंग: प्रदान किए गए मार्कर तत्व डोम में उजागर नहीं होते हैं, इसलिए विशिष्ट रेंडर मार्करों के लिए गुणों या तत्वों को समायोजित करना असंभव है (हालांकि यह परिभाषित मार्कर तत्व को स्क्रिप्ट करने के लिए पूरी तरह से संभव है)।

मार्कर तत्व की overflow संपत्ति अपने आप hidden । यह वह चीज है जो मार्कर टाइल को ओवरफ्लो करती है। यह स्पष्ट रूप से सीएसएस में visible लिए सेट किया जा सकता है। जुलाई 2016 तक, क्रोम overflow: visible साथ मार्करों का समर्थन नहीं करता है overflow: visible - लेकिन मार्कर तत्व पर एक फ़िल्टर सेट करने के लिए एक वर्कअराउंड है - जो ओवरफ़्लो क्लिपिंग को अक्षम करने के लिए लगता है।

एक मार्कर के भीतर तत्वों पर फ़िल्टर लागू किया जा सकता है। हालाँकि युक्ति में स्पष्ट रूप से अनुमति नहीं है, मार्कर तत्व पर निर्दिष्ट होने पर फ़िल्टर भी काम करने लगते हैं।

मार्कर तत्व के बारे में अधिक जानकारी के लिए, कृपया SVG 1.1 युक्ति में मार्कर अनुभाग देखें।

मूल मार्कर

यह एक न्यूनतम संख्या के मापदंडों के साथ निर्दिष्ट अंत मार्कर का एक उदाहरण है। ध्यान दें कि मूल तत्व का स्ट्रोक रंग मार्कर द्वारा विरासत में नहीं मिला है।

<svg width="800px" height="600px">
<defs>
      <marker id="examplemarker"
        viewBox="0 0 10 10" 
        refX="0" refY="5" 
        orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>
  </defs>
  
  <line x1="20" y1="20" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#examplemarker)" />
</svg>

RefX, refY और प्राच्य के लिए वैकल्पिक मूल्यों के प्रभाव

मार्कर को खींचने के लिए अक्ष ऑफ़सेट जो कि refX और refY द्वारा निर्दिष्ट हैं, orient पैरामीटर द्वारा निर्दिष्ट रोटेशन से पहले लागू होते हैं। नीचे आप orient और refX के विभिन्न संयोजनों के प्रभावों को देख सकते हैं, refY स्पष्ट करने के लिए refY ।

<svg width="800px" height="600px">
<defs>
      <marker id="marker1"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker2"
      viewBox="0 0 10 10" refX="0" refY="0" orient="0" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker3"
      viewBox="0 0 10 10" refX="20" refY="20" orient="0" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker4"
      viewBox="0 0 10 10" refX="20" refY="20" orient="180" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />
  
  <text x="20" y="150"> refX,Y  (0,5) orient (auto) </text>
  
  <line  x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />
  
    <text x="220" y="150"> refX,Y  (0,0) orient (0) </text>
  
  <line  x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />
  
      <text x="20" y="390"> refX,Y  (20,20) orient (0) </text>
  
  <line  x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />
  
      <text x="220" y="390"> refX,Y  (20,20) orient (180) </text>
</svg>

मार्कर यूनेट्स, मार्करविथ, मार्करहाइट के लिए वैकल्पिक मूल्यों का प्रभाव

मार्करों को आकर्षित करने के लिए डिफ़ॉल्ट कॉलिंग तत्व की स्ट्रोक चौड़ाई का उपयोग करना है, लेकिन आप स्पष्ट रूप से निर्दिष्ट कर सकते हैं कि मार्कर markerUnits="userSpaceOnUse" निर्दिष्ट करके तत्व के लिए यूनिट सिस्टम का उपयोग करके तैयार किया जा सकता है। मार्करों को एक 3x3 मार्कर यूनाइट्स बॉक्स (3 स्ट्रोककेवेट्स यदि मार्कर यूनेट निर्दिष्ट नहीं हैं) में तैयार किया गया है। लेकिन बॉक्स की चौड़ाई और ऊंचाई को markerHeight और markerWidth साथ स्पष्ट रूप से निर्दिष्ट किया जा सकता है। markerUnits , markerHeight और markerWidth के विभिन्न संयोजनों के प्रभावों के लिए नीचे देखें।

<svg width="800px" height="600px">
<defs>
      <marker id="marker1"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="1" markerHeight="1">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker2"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="4" markerHeight="4">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker3"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="15">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker4"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="30" markerHeight="30">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />     
    <text x="20" y="150"> markerUnits = strokeWidth </text>
    <text x="20" y="170"> markerWidth|Height = 1 </text>
  
  <line  x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />      
    <text x="250" y="150"> markerUnits = strokeWidth </text>
    <text x="250" y="170"> markerWidth|Height = 4 </text>
  
  <line  x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />      
      <text x="20" y="390"> markerUnits = userSpaceOnUse </text>
      <text x="20" y="410"> markerWidth|Height = 15 </text>
  
  <line  x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />      
      <text x="250" y="390"> markerUnits = userSpaceOnUse </text>
      <text x="250" y="410"> markerWidth|Height = 30 </text>
</svg>

लाइन, पॉलीलाइन, बहुभुज और पथ तत्वों पर प्रारंभ, मध्य और अंत मार्कर

तत्व अलग से प्रारंभ, मध्य और अंत मार्कर निर्दिष्ट कर सकते हैं। नीचे उन सभी तत्वों के लिए प्रारंभ, मध्य और अंत मार्करों के उदाहरण दिए गए हैं जिन्हें चिह्नित किया जा सकता है। कृपया ध्यान दें कि क्रोम वर्तमान में (जुलाई 2016) पॉलीगोन ( बग # 633012 ) के लिए शुरुआत और अंत मार्करों के लिए सही ढंग से ऑटो ओरिएंटेशन की गणना नहीं करता है, और चाप पथ खंडों के लिए मध्य मार्कर ( बग # 583097 ) को सही ढंग से जगह नहीं देता है

<svg width="800px" height="600px">
<defs>
      <marker id="red-chevron"
      viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
         <path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="red" />
      </marker>

      <marker id="black-arrow"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
         <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>

      <marker id="red-circle"
      viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
         <circle fill="red" cx="5" cy="5" r="5" />
      </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
  <text x="20" y="150"> line: marker-mid not applied</text>
  
  <polyline  points="220,20 300,100 400,20" fill="none" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
    <text x="250" y="150"> polyline </text>
   
  <polygon  points="20,190 100,200 150,300 100,350 20,260" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" fill="none" stroke-width="5" stroke="black" />
   <text x="20" y="390"> polygon: end/start overlap </text>
      
  <path d="M250,350 l 25,-25 
        a15,5 -16 0,1 10,-15 l 20,-5 
        a15,10 -16 0,1 10,-15 l 20,-5 
        a15,25 -16 0,1 10,-15 l 20,-5 
        a15,35 -16 0,1 10,-15 l 20,-5"
        fill="none" stroke="green" stroke-width="2" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)"  />
      <text x="250" y="390"> path with arc segments </text>
</svg>

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

SVG
निशान

खोज…