SVG Marker Id not being "found"

Asked

Viewed 18 times

0

inserir a descrição da imagem aqui

I have a list of web block. This web block contains Divs each with the code below, which I display according to the sent Id.

These are the codes I have in each div:

Div1

"<svg width='200' height='176'>
  <defs>
    <marker id='arrowThree' markerWidth='10' markerHeight='10' refX='0' refY='3' orient='auto' markerUnits='strokeWidth'>
      <path d='M0,0 L0,6 L9,3 z' fill='#000' />
    </marker>
  </defs>
  <line x1='185' y1='5' x2='185' y2='140' stroke='#000' stroke-width='3' marker-end='url(#arrowThree)' />
  <line x1='178' y1='160' x2='27' y2='25' stroke='#000' stroke-width='3' marker-end='url(#arrowThree)' />
  <line x1='10' y1='20' x2='10' y2='140' stroke='#000' stroke-width='3' marker-end='url(#arrowThree)' />
</svg>"

Div2

"<svg width='200' height='118'>
  <defs>
    <marker id='arrowTwo' markerWidth='10' markerHeight='10' refX='0' refY='3' orient='auto' markerUnits='strokeWidth'>
      <path d='M0,0 L0,6 L9,3 z' fill='#000' />
    </marker>
  </defs>
  <line x1='185' y1='5' x2='185' y2='82' stroke='#000' stroke-width='3' marker-end='url(#arrowTwo)' /> 
  <line x1='182' y1='110' x2='27' y2='18' stroke='#000' stroke-width='3' marker-end='url(#arrowTwo)' />
  <line x1='10' y1='15' x2='10' y2='82' stroke='#000' stroke-width='3' marker-end='url(#arrowTwo)' />
</svg>"

DIV3

"<svg width='200' height='60' id='teste'>
  <defs id='teste1'>
    <marker id='arrowLeftDown' markerWidth='10' markerHeight='10' refX='0' refY='3' orient='auto' markerUnits='strokeWidth'>
      <path d='M0,0 L0,6 L9,3 z' fill='#000' />
    </marker>
  </defs>
  <line x1='10' y1='5' x2='10' y2='25' stroke='#000' stroke-width='3' marker-end='url(#arrowLeftDown)' />
</svg>"

The list will always have div1 or div2 plus div3.

Ex:

Div1 Div1 Div3 Div3 Div3 Div3

Or

Div2 Div3 Div3 Div3

The problem is that the div3 does not recognize the Marker "arrowLeftDown", but if I put "arrowThree" if it is after Div1 or "arrowTwo" if after Div2 it recognizes and places the Marker. But I cannot have this distinction because it is dynamic and I do not want to create several Div3, one for each Div1 and Div2.

html div svg id

  • Your svg are img.svg files that you call in the document, or vc directly uses the svg code within the document?

  • Inside the document

  • Guy here looks like this http://prntscr.com/od4b5l would have you edit and include the CSS of the div that this svg goes into. Take advantage and include in the question a complete example of the whole HTML of when the problem happens, because here I could not simulate your problem...

1 answer

0


I put a SVG tag on the def before the others, so it went like this:

<svg width='0' height='0'>
      <defs>
        <marker id='arrow' markerWidth='10' markerHeight='10' refX='0' refY='3' orient='auto' markerUnits='strokeWidth'>
          <path d='M0,0 L0,6 L9,3 z' fill='#000' />
        </marker>
      </defs>
</svg>

<div>
    <svg width='200' height='176'>
      <line x1='185' y1='5' x2='185' y2='140' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
      <line x1='178' y1='160' x2='27' y2='25' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
      <line x1='10' y1='20' x2='10' y2='140' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
    </svg>
</div>

<div>
    <svg width='200' height='118'>  
      <line x1='185' y1='5' x2='185' y2='82' stroke='#000' stroke-width='3' marker-end='url(#arrow)' /> 
      <line x1='182' y1='110' x2='27' y2='18' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
      <line x1='10' y1='15' x2='10' y2='82' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
    </svg>
</div>

<div>
    <svg width='200' height='60'> 
      <line x1='10' y1='5' x2='10' y2='25' stroke='#000' stroke-width='3' marker-end='url(#arrow)' />
    </svg>
</div>

Browser other questions tagged html div svg id

You are not signed in. Login or sign up in order to post.