Wie man "Hintergrund: Repeating-Linear-Gradient" Stil für Rect mit d3.js

Question

Ich habe Probleme zu replizieren Repeating-linear-Gradienten Styling für Rect mit d3.

zB: Ich habe folgenden div Stil:

.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); 
} 

wenn ich die Klasse in div wie:

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

es sieht aus wie:

Wie kann ich den gleichen Stall anwenden? le für rect in d3.js?

Answer 1

Auschecken this fiddle! Ich denke, diese Lösung wird tun, was Sie brauchen.

<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"/> 

Answer 2

Sie ein Muster in Ihrem SVG definieren müssen, wie auf dieser Seite beschrieben: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

ich eine Geige erstellt haben, die ein Muster ähnlich hat, was Sie brauchen: http://jsfiddle.net/11k570ud/

Danach, Sie geben dem rect das Attribut:

fill="url(#yourPatternID)" 

Sie können entweder enthalten diese im sVG-Code oder fügen Sie es mit D3.js. Eine Erklärung, wie man das macht, finden Sie in here (dieser Beitrag verwendet Farbverläufe, aber Muster funktionieren in einer sehr ähnlichen Weise).