動態地將2個條紋應用於SVG

我目前正在一個選舉網站的地圖上工作地圖是SVG，我們需要地圖根據選舉結果使用2種不同顏色的條紋。動態地將2個條紋應用於SVG

由於結果已公佈，地圖會着色區域，即紅色=所選區域的勞動力，但在我們的情況下，一個區域可以有2個黨的區域，因此我們需要地圖在該區域顯示紅色/藍色條紋以顯示用戶的結果。

有沒有人知道如何實現這個目標？

一個想法是利用填充顏色的選擇和覆蓋&像這50％的填充顏色和其他50％的透明顯示背景填充它的後面，但是我們不能讓這兩個顯示

以下我附上用於地圖

<svg version="1.1" 
 
       id="svg5136" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" inkscape:version="0.91 r13725" sodipodi:docname="close_up_02.svg" 
 
       xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350px" 
 
       height="350px" viewBox="0 0 660.811 535.805" enable-background="new 0 0 660.811 535.805" xml:space="preserve"> 
 

 
       <g id="g5144" transform="matrix(1.25,0,0,-1.25,-188.59631,638.40215)" inkscape:label="ElectSuf Mapbse nl" inkscape:groupmode="layer"> 
 
        <path id="path6049" inkscape:connector-curvature="0" fill="#FFFFFF" stroke="#000000" stroke-width="2.24" d="M289.6,296 
 
          l-15.2,10.4l1.6,10.4l0.8,16l3.2,10.4l8,14.4l6.4,12.8l2.4,11.2l3.2,1.6l16,17.6l-3.2,3.2l7.2,3.2l0.8,4l20.8,17.6h3.2l12,10.4 
 
          l12.8,11.2l-2.4,12l4.8,3.2l4-2.4l4-10.4l-2.4-4l1.6-6.4l2.4-6.4l-0.8-6.4l0.8-7.2l12-14.4l7.2-6.4v-6.4l-0.8-6.4l-0.8-4.8l1.6-5.6 
 
          l13.6-0.8l-3.2-3.2l2.4-4l1.6-4.8v-4v-6.4l-6.4-0.8l-1.6-4.8l-1.6-4.8l-2.4-5.6l-4.8-2.4l-4-3.2l0.8-8.8l7.2-1.6l10.4-0.8l1.6-2.4 
 
          l12.8,4l-2.4-4l0.8-4l6.4-8l4.8-7.2l2.4-4l7.2-4l6.4-6.4l3.2-6.4l3.2-6.4l-1.6-5.6l-8.8-0.8l-4.8-2.4l-1.6-8L412,268l-11.2,5.6 
 
          l-2.4,5.6h-4.8l-4.8,1.6l-5.6-0.8l-4.8-0.8l-6.4-0.8l-4,9.6l-28-3.2l-10.4-2.4l-9.6,0.8l-3.2-2.4l-4.8-1.6L289.6,296z"/> 
 

 
        <path id="path6053" inkscape:connector-curvature="0" fill="#ffffff" stroke="#000000" stroke-width="2.24" d="M493.6,363.2l7.2-4 
 
          L560,360l-0.8-87.2l-4-2.4l-6.4-1.6l-24,4l-8.8,1.6l-18.4,2.4L484,280l-11.2,3.2l-5.6-12l-8-3.2l-0.8,5.6l-4,10.4l-6.4,8l-8.8,5.6 
 
          l-8.8,11.2l-5.6,8.8l2.4,8l-12-4.8l-3.2,2.4h-9.6l-5.6,1.6l-2.4,8.8l8.8,4.8l4.8,15.2l6.4,1.6l0.8,9.6l-0.8,4l-3.2,4.8l1.6,4.8 
 
          h-10.4l-4,6.4l0.8,9.6l6.4,1.6l4.8,3.2l0.8,2.4h5.6l11.2,5.6l8,2.4l1.6,8l10.4-14.4l10.4-12l13.6-9.6l18.4-8l3.2-3.2V363.2z"/> 
 
       </g> 
 
      </svg>

來源

2016-12-12 Dan Vinnicombe

一個的LinearGradient或者圖案可以被用來創建條紋。向我們展示你的想法在代碼中的問題，也許我們可以糾正它。 –

http://codepen.io/iiCe89/pen/oYPWBL這裏是Codepen apauigies的codepen它不會讓我添加任何帖子：/ –

@RobertLongson看到新的代碼 –

你可能需要模式的代碼，這裏有一個片段：

<svg version="1.1" 
 
       id="svg5136" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" inkscape:version="0.91 r13725" sodipodi:docname="close_up_02.svg" 
 
       xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350px" 
 
       height="350px" viewBox="0 0 660.811 535.805" enable-background="new 0 0 660.811 535.805" xml:space="preserve"> 
 
    <defs> 
 
<pattern id="red-blue" viewBox='0 0 1 1' x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> 
 
    <rect x=0 y=0 width=1 height=1 fill='#f33' /> 
 
    <path d='M0 0 L1 1' stroke=#55f stroke-width='.33' /> 
 
    <path d='M0 -1 L2 1' stroke=#55f stroke-width='.33' /> 
 
    <path d='M-1 0 L1 2' stroke=#55f stroke-width='.33' /> 
 
    </pattern> 
 
    </defs> 
 
       <g id="g5144" transform="matrix(1.25,0,0,-1.25,-188.59631,638.40215)" inkscape:label="ElectSuf Mapbse nl" inkscape:groupmode="layer"> 
 
        <path id="path6049" inkscape:connector-curvature="0" fill="url(#red-blue)" stroke="#000000" stroke-width="2.24" d="M289.6,296 
 
          l-15.2,10.4l1.6,10.4l0.8,16l3.2,10.4l8,14.4l6.4,12.8l2.4,11.2l3.2,1.6l16,17.6l-3.2,3.2l7.2,3.2l0.8,4l20.8,17.6h3.2l12,10.4 
 
          l12.8,11.2l-2.4,12l4.8,3.2l4-2.4l4-10.4l-2.4-4l1.6-6.4l2.4-6.4l-0.8-6.4l0.8-7.2l12-14.4l7.2-6.4v-6.4l-0.8-6.4l-0.8-4.8l1.6-5.6 
 
          l13.6-0.8l-3.2-3.2l2.4-4l1.6-4.8v-4v-6.4l-6.4-0.8l-1.6-4.8l-1.6-4.8l-2.4-5.6l-4.8-2.4l-4-3.2l0.8-8.8l7.2-1.6l10.4-0.8l1.6-2.4 
 
          l12.8,4l-2.4-4l0.8-4l6.4-8l4.8-7.2l2.4-4l7.2-4l6.4-6.4l3.2-6.4l3.2-6.4l-1.6-5.6l-8.8-0.8l-4.8-2.4l-1.6-8L412,268l-11.2,5.6 
 
          l-2.4,5.6h-4.8l-4.8,1.6l-5.6-0.8l-4.8-0.8l-6.4-0.8l-4,9.6l-28-3.2l-10.4-2.4l-9.6,0.8l-3.2-2.4l-4.8-1.6L289.6,296z"/> 
 

 
        <path id="path6053" inkscape:connector-curvature="0" fill="#ffffff" stroke="#000000" stroke-width="2.24" d="M493.6,363.2l7.2-4 
 
          L560,360l-0.8-87.2l-4-2.4l-6.4-1.6l-24,4l-8.8,1.6l-18.4,2.4L484,280l-11.2,3.2l-5.6-12l-8-3.2l-0.8,5.6l-4,10.4l-6.4,8l-8.8,5.6 
 
          l-8.8,11.2l-5.6,8.8l2.4,8l-12-4.8l-3.2,2.4h-9.6l-5.6,1.6l-2.4,8.8l8.8,4.8l4.8,15.2l6.4,1.6l0.8,9.6l-0.8,4l-3.2,4.8l1.6,4.8 
 
          h-10.4l-4,6.4l0.8,9.6l6.4,1.6l4.8,3.2l0.8,2.4h5.6l11.2,5.6l8,2.4l1.6,8l10.4-14.4l10.4-12l13.6-9.6l18.4-8l3.2-3.2V363.2z"/> 
 
       </g> 
 
      </svg>

來源

2016-12-12 11:38:40

謝謝你，這就是我一直在尋找！ –

動態地將2個條紋應用於SVG

回答

相關問題