Применить 2 полосы к SVG динамически

Im в настоящее время работает над картой для веб-сайта Elections Карта 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 с кодом apoloigies это не позволит мне что-то добавить в сообщение:/ –

@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 динамически

ответ

Смежные вопросы