Как объединить два SVG Flile - PullRequest
0 голосов
/ 16 марта 2020

У меня есть два файла (svg) от get font-awesome

1 Поиск иконок https://fontawesome.com/icons/search?style=solid

2 Icon рабочий стол https://fontawesome.com/icons/desktop?style=solid

Я хотел бы получить конечный sh результат, как мне жаль, я не могу использовать Adobe Illustrator

enter image description here

Заранее благодарим Вас за усердие

1 Ответ

2 голосов
/ 16 марта 2020

Я помещаю оба пути (компьютер #cp и увеличительное стекло) в один элемент SVG. Обратите внимание, что увеличительное стекло является символом и имеет собственный атрибут viewBox. Это позволит мне изменить его размер и расположить его по мере необходимости, используя элемент <use> с позицией (x, y) и размером (шириной):

<use xlink:href="#mg" fill="red" width="300" x="400" y="100"  stroke-width="30" stroke="white" paint-order = "stroke fill" />

Я надеюсь, вы найдете это полезно:

<svg viewBox="0 0 700 540" >
<defs>
<symbol viewBox="-20 0 500 438" id="mg">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M287.686,317.613c-44.246,32.716-92.632,44.711-145.867,34.022
		c-44.507-8.937-80.279-32.364-107.23-68.768C-17.896,211.978-9.703,111.877,52.721,50.913
		c65.372-63.843,167.875-67.842,237.902-10.879c64.849,52.75,93.084,159.289,27.631,247.105c4.34,0,8.222,0.143,12.089-0.031
		c6.949-0.312,12.7,2.262,17.505,7.059c27.479,27.436,54.99,54.837,82.342,82.398c10.109,10.187,9.872,21.971-0.188,32.144
		c-7.265,7.347-14.526,14.699-21.934,21.901c-9.676,9.407-20.949,9.446-30.493-0.055c-27.99-27.865-55.854-55.857-83.824-83.743
		c-5.25-5.234-6.842-11.599-6.585-18.683C287.279,324.973,287.475,321.819,287.686,317.613z
                                                               M68.576,177.429c-0.658-58.105,47.084-109.266,109.23-109.212
		c60.523,0.052,109.069,48.696,109.216,109.302c0.145,60.339-48.154,109.597-109.557,109.436
		C115.029,286.791,67.692,235.734,68.576,177.429z"/>
</symbol>
</defs>
<g id="cp">
	<path fill-rule="evenodd" d="M355.128,397.23c4.431,13.312,8.741,26.191,12.992,39.09
		c0.933,2.829,3.232,1.861,5.027,1.868c19.163,0.074,38.327-0.067,57.488,0.113c11.443,0.107,20.518,9.763,20.256,21.033
		c-0.233,10.074-8.367,18.81-18.422,19.729c-1.655,0.151-3.329,0.136-4.994,0.136c-75.652,0.009-151.304-0.029-226.955,0.067
		c-8.242,0.011-15.168-2.292-19.817-9.298c-4.163-6.274-4.849-13.108-1.293-19.912c3.73-7.136,9.618-11.604,17.847-11.695
		c18.994-0.211,37.993-0.229,56.985,0.009c4.068,0.051,5.775-1.184,6.953-5.021c3.267-10.639,6.842-21.191,10.627-31.657
		c1.416-3.917,0.533-4.573-3.4-4.564c-52.822,0.118-105.646,0.12-158.468,0.051c-18.57-0.024-32.642-9.713-39.553-26.76
		c-2.249-5.548-2.435-11.332-2.434-17.184c0.015-49.49,0.002-98.98,0.003-148.47c0.001-40.492-0.057-80.984,0.044-121.476
		c0.046-18.598,10.123-32.75,27.482-39.483c5.455-2.116,11.1-2.012,16.745-2.013c94.647-0.024,189.296-0.016,283.943-0.012
		c40.658,0.002,81.319,0.241,121.975-0.085c18.796-0.151,33.316,10.927,39.614,26.602c2.225,5.539,2.468,11.321,2.466,17.178
		c-0.024,58.322-0.019,116.644-0.019,174.965c-0.001,30.827-0.705,61.676,0.232,92.475c0.729,23.897-17.471,44.839-44.371,44.501
		c-51.481-0.646-102.977-0.188-154.466-0.187C359.634,397.23,357.65,397.23,355.128,397.23z
                               
                               M314.081,96.229c61.994,0,123.988,0.045,185.981-0.096
		c4.433-0.01,5.834,0.936,5.824,5.659c-0.16,78.492-0.163,156.984,0.005,235.477c0.01,4.762-1.452,5.607-5.818,5.604
		c-123.987-0.112-247.976-0.114-371.963-0.003c-4.371,0.004-5.832-0.848-5.821-5.604c0.166-78.491,0.163-156.984,0.006-235.476
		c-0.009-4.686,1.333-5.693,5.805-5.683c61.994,0.145,123.988,0.098,185.981,0.098C314.081,96.212,314.081,96.22,314.081,96.229z"/>
</g>  
  <use xlink:href="#mg" width="300" x="400" y="100"  stroke-width="30" stroke="white" paint-order = "stroke fill" />
</svg>
...