पूरी तरह से क्षैतिज पथ

Question

के लिए एसवीजी ढाल मैं लाइन चार्ट खींचने के लिए svg का उपयोग कर रहा हूं, और इसके लिए एक ढाल लागू करने की आवश्यकता है। प्रत्येक पंक्ति के लिए, मैं पथ तत्व का उपयोग करता हूं और स्ट्रोक को अपने लाइनग्राइडेंट तत्वों में से एक पर सेट करता हूं।

यह सब कुछ के लिए बहुत अच्छा काम करता है लेकिन पूरी तरह से क्षैतिज रेखाएं - इस मामले में, मुझे अपनी लाइन पर कोई रंग नहीं मिलता है।

मैं इस समस्या को दर्शाने वाला एक बेला कर दिया है: http://jsfiddle.net/b6EQT/

<svg> 
    <defs> 
     <linearGradient id="grad" x1="0%" x2="100%" y1="0%" y2="0%"> 
      <stop class="" offset="0%" style="stop-color: red;"></stop> 
      <stop class="" offset="33%" style="stop-color: yellow;"></stop> 
      <stop class="" offset="66%" style="stop-color: pink;"></stop> 
      <stop class="" offset="100%" style="stop-color: blue"></stop> 
     </linearGradient> 
    </defs> 
<-- Gradient not applied --> 
<path stroke="url(#grad)" d="M20,20L400,20" style="stroke-width: 10px;"></path> 

<-- Gradient applied since height of 1px --> 
<path stroke="url(#grad)" d="M20,40L400,41" style="stroke-width: 10px;"></path> 

<-- Gradient applied because of fake initial "move to" --> 
<path stroke="url(#grad)" d="M-1,-1,M20,60L400,60" style="stroke-width: 10px;"></path> 
</svg>​ 

शुद्ध क्षैतिज रेखा (प्रथम पथ) प्रकट नहीं होता है, और दूसरा एक (y में मामूली परिवर्तन) करता है।

मैंने इसे जाने के लिए थोड़ा हैक करने की कोशिश की - शुरुआत में नकली एम -1, -1 डालना, जो आईई और क्रोम में इस मुद्दे के आसपास काम करता है, लेकिन फ़ायरफ़ॉक्स नहीं। इससे मुझे लगता है कि मैं एसवीजी ग्रेडियेंट्स और पथों की मेरी समझ में कुछ खो रहा हूं। क्या यह काम करने के लिए कोई रास्ता है?

Answer 1

gradientUnits के लिए डिफ़ॉल्ट ऑब्जेक्टबाउंडिंगबॉक्स है। आपके पास महत्वपूर्ण समस्या specification text के अंतिम अनुच्छेद में वर्णित है। अगर आपको क्षैतिज रेखा मिली है तो स्ट्रोक के साथ पथ के बजाय एक पंख का उपयोग क्यों न करें? या वैकल्पिक रूप से userSpaceOnUse इकाइयों का उपयोग करें।

Answer 2

gradientUnits = "userSpaceOnUse" इसे ठीक कर सकता है।

Demo

<linearGradient id="grad" x1="0%" x2="100%" y1="0%" y2="0%" gradientUnits="userSpaceOnUse"> 
     <stop class="" offset="0%" style="stop-color: red;"></stop> 
     <stop class="" offset="33%" style="stop-color: yellow;"></stop> 
     <stop class="" offset="66%" style="stop-color: pink;"></stop> 
     <stop class="" offset="100%" style="stop-color: blue"></stop> 
</linearGradient> 

More detail answer