SVG зеркальные пути без изменения координат - PullRequest
Новая
       31

SVG зеркальные пути без изменения координат

0 голосов
/ 30 января 2019

У меня есть изображение SVG, но я хотел отразить его без изменения координат линии / обводки, но поменять местами стрелку и окружность ... Есть ли более эффективный способ сделать это?Одна вещь, о которой я думал, это изменение угла каждой стрелки и круга, но это утомительно.другое предложение использует transform matrix.Кто-нибудь знает, как это сделать?заранее спасибо. 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">

<g>
<path fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" />
	<g fill="#4caf50" id="test">
		<polygon class="one" points="201.6,79 202.1,77.7 195.7,75.1 198.8,68.9 197.5,68.3 193.8,75.9"/>
		<path class="two" d="M461.6,138.1c0.8,1.4,2.7,1.9,4.1,1.1s1.9-2.7,1.1-4.1c-0.8-1.4-2.7-1.9-4.1-1.1 C461.3,134.8,460.8,136.6,461.6,138.1z"/>
	</g>
</g>
</svg>

1 Ответ

0 голосов
/ 30 января 2019

Это можно решить с помощью маркеров SVG. MDN и W3C 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<defs> 
  <marker id="arrow1" viewBox="0 0 20 20" refX="0" refY="10"
        markerUnits="userSpaceOnUse"  orient="auto"
        markerWidth="20" markerHeight="20">
        <polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
    </marker>
      <marker id="circle1" viewBox="0 0 10 10" refX="0" refY="5"
           markerUnits="userSpaceOnUse"
            markerWidth="10" markerHeight="10">
            <circle cx="5" cy="5" r="5" fill="#4caf50""  />
      </marker>
 </defs

<g>
<path fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4"  style=" marker-start: url(#circle1); marker-end: url(#arrow1); 
      fill:none; stroke:green; stroke-width:2; " />
	
</svg>

Обновление

Угол маркера можно изменить с помощью атрибута orient = ("180").

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<defs> 
  <marker id="arrowLeft" viewBox="0 0 20 20" refX="0" refY="10"
        markerUnits="userSpaceOnUse"  orient="170"
        markerWidth="20" markerHeight="20">
        <polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
    </marker>
	
	 <marker id="arrowRight" viewBox="0 0 20 20" refX="0" refY="10"
        markerUnits="userSpaceOnUse"  orient="auto"
        markerWidth="20" markerHeight="20">
        <polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
    </marker>
	 
      <marker id="circle1" viewBox="0 0 10 10" refX="0" refY="5"
           markerUnits="userSpaceOnUse" orient="auto"
            markerWidth="10" markerHeight="10">
            <circle cx="5" cy="5" r="5" fill="#4caf50"  />
      </marker>
 </defs>


<path id="path1" fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4"  style=" marker-end: url(#arrowRight); marker-start: url(#circle1); 
      fill:none; stroke:green; stroke-width:2; " />  
	  
	 <g transform="translate(0 100)" >
	<path id="path1" fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4"  style=" marker-end: url(#circle1); marker-start: url(#arrowLeft); 
      fill:none; stroke:green; stroke-width:2; " />  
	  
	 </g> 
	  
	  
	
</svg>
...