如何使用d3.js應用「背景：重複線性漸變」樣式rect使用d3.js

我無法複製重複線性漸變使用d3的矩形樣式。如何使用d3.js應用「背景：重複線性漸變」樣式rect使用d3.js

如：我有以下DIV風格：

.colorbarssegment{ 
    background: repeating-linear-gradient(to right, 
         #c0c0c0, #c0c0c0 4px, 
         #c0c000 4px, #c0c000 8px, 
         #00c0c0 8px, #00c0c0 12px, 
         #00c000 12px, #00c000 16px, 
         #c000c0 16px, #c000c0 20px, 
         #c00000 20px, #c00000 24px, 
         #0000c0 24px, #0000c0 28px); 
}

當我使用類的div，如：

<div class="colorbarssegment" style="width: 200px; height: 20px;"></div>

它看起來像：

我如何應用相同的麥粒腫le for rect in d3.js？

來源

2016-04-07 Abhishek Mukherjee

對不起，先生，這是行不通的。 –

顯示您的d3代碼 – Miro

[用重複的線性漸變顏色填充SVG元素的可能的重複]（http://stackoverflow.com/questions/27511153/fill-svg-element-with-a-repeating-linear-gradient-color ） – KWeiss

結帳this fiddle！我認爲這個解決方案可以滿足你的要求。

<svg width="500" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <linearGradient id="Gradient2" x1="16%" x2="1%" y1="50%" y2="50%"> 
     <stop offset="0%" stop-color="#c0c0c0"/> 
     <stop offset="20%" stop-color="#c0c000"/> 
     <stop offset="40%" stop-color="#c0c000"/> 
     <stop offset="60%" stop-color="#c000c0"/> 
     <stop offset="80%" stop-color="#c00000"/> 
     <stop offset="100%" stop-color="#0000c0"/> 
     </linearGradient> 
     <linearGradient id="repeat"xlink:href="#Gradient2"spreadMethod="repeat" /> 
     <style type="text/css"><![CDATA[ 
     #rect1 { fill: url(#repeat); } 
     .stop1 { stop-color: #c0c0c0; } 
     .stop2 { stop-color: #c0c000; } 
     .stop3 { stop-color: #c0c000; } 
     .stop4 { stop-color: #c000c0; } 
     .stop5 { stop-color: #c00000; } 
     .stop6 { stop-color: #0000c0; } 
     ]]></style> 
    </defs> 

    <rect id="rect1" x="10" y="10" rx="15" ry="15" width="120" height="30"/>

來源

2016-04-07 08:23:59 kid

你必須爲這個網頁上描述您的SVG定義一個模式： https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

我創建了具有類似於你所需要的圖案的小提琴： http://jsfiddle.net/11k570ud/

之後，你給rect屬性：

fill="url(#yourPatternID)"

您可以包括這在SVG代碼，或D3.js.添加它如何做到這一點的解釋可以找到here（本文使用漸變，但模式以非常相似的方式工作）。

來源

2016-04-07 07:19:29 KWeiss

我只是想鏈接到[這個]（https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns） – Miro

你是對的，對於你需要的重複漸變一種模式 – KWeiss

如何使用d3.js應用「背景：重複線性漸變」樣式rect使用d3.js

回答

相關問題