एसवीजी: लाइन

Question

मैं एक "मार्कर के अंत" के साथ एक एसवीजी रेखा खींचने कर रहा हूँ के अंत के साथ "मार्कर के अंत" की नोक संरेखित यह एक तीर बनाने के लिए। यह रेखा के अंत से आगे बढ़ने वाले तीरहेड को खींचता है, जिससे पूरे तीर को लंबा बना दिया जाता है, लेकिन मैं चाहता हूं कि पूरा तीर मूल रेखा के समान लंबाई हो। यही है, तीर का निशान रेखा के अंत बिंदु पर होना चाहिए। मैं उसको कैसे करू?

समायोजित करने के लिए तीर का आकार वास्तव में काम नहीं करेगा लाइन कम करना। तीर के आकार लाइन (जो अच्छा है) की मोटाई पर निर्भर करता है, लेकिन मैं मोटाई पता नहीं है, क्योंकि यह एक शैली तत्व यह है कि पहले से ही एसवीजी दस्तावेज़ के लिए लिखा गया है में निर्दिष्ट किया जा सकता है।

इस उदाहरण में, मैं तीर पूरी तरह वर्ग के अंदर नहीं बल्कि वर्ग से बाहर चिपके हुए से करना चाहते हैं, वर्ग के कोने में अपनी टिप के साथ,।

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
 
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="0" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto"> 
 
      <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker> 
 
<line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" /> 
 
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/> 
 
</g></svg>

Answer 1

60 को refX गुण (जो मैं तीर की चौड़ाई हो सकता है लगता है कि जब सही की ओर इशारा करते उन्मुख) की स्थापना इस समस्या को हल करने के लिए लगता है। चौड़ाई स्केलिंग ठीक लगती है, अन्य विशेषताओं के बारे में निश्चित नहीं है।

मुझे कोई एसवीजी विशेषज्ञ, बस यह रोचक लगा और विशेषताओं के साथ खेला जाता है जब तक मैं इस समाधान पर ठोकर खाई हूँ, तो एक अलग नज़रिए उसे अपने साथ ले।

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
 
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="0" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto"> 
 
     <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker> 
 
    <marker id="arrowhead1" viewBox="0 0 60 60" refX="60" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto"> 
 
     <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker> 
 
    <marker id="arrowhead2" viewBox="0 0 60 60" refX="60" refY="30" markerUnits="strokeWidth" markerWidth="16" markerHeight="10" orient="auto"> 
 
     <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker> 
 
<line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" /> 
 
<line marker-end="url(#arrowhead1)" x1="1" y1="100" x2="50" y2="50" stroke="#800000" /> 
 
<line marker-end="url(#arrowhead2)" x1="100" y1="1" x2="50" y2="50" stroke="#800000" /> 
 
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/> 
 
</g></svg>

Answer 2

REFX और refY नियंत्रण कि इतने आवश्यकता के अनुसार समायोजित। जैसे

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
 
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="44" refY="34" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto"> 
 
      <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker> 
 
<line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" /> 
 
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/> 
 
</g></svg>

Answer 3

उपयोग "मार्कर से शुरू" के बदले "मार्कर के अंत", तीर पीछे की ओर आकर्षित है, और रेखा के अंतिम बिंदु स्वैप।

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
 
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="0" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto"> 
 
      <path d="M 60 0 L 0 30 L 60 60 z" fill="#800000" /> </marker> 
 
<line marker-start="url(#arrowhead0)" x1="100" y1="100" x2="1" y2="1" stroke="#800000" /> 
 
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/> 
 
</g></svg>