Как я могу изменить размер SVG-пути без изменения маски или других элементов? - PullRequest
0 голосов
/ 07 февраля 2020

У меня есть SVG, размер которого мне удалось изменить, установив preserveAspectRatio в none. Проблема в том, что когда я изменяю размер этого изображения, замаскированное отверстие слева также сжимается, и цель состоит в том, чтобы изменить только path, но не mask.
1
Влево оригинал и правый размер изменен

Оригинал SVG:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="159px" height="82px" viewBox="0 0 159 82">

    <defs>
        <mask id="Mask" maskContentUnits="userSpaceOnUse">
            <rect width="200" height="200" fill="white" opacity="1"/>
            <path d="M22,40.5c0,3.5-2,4.5-4.5,4.5S13,43,13,40.5c0-2.5,2-4.5,4.5-4.5C20,36,22,38,22,40.5" />
        </mask>
    </defs>
        
    <path mask="url(#Mask)" fill-rule="evenodd" fill="#cc0000" d="M0,41L0,41c0,22.6,18.4,41,41,41l109.9,0c4.5,0,8.1-3.6,8.1-8.1c0,0,0,0,0,0l0-65.8c0-4.5-3.6-8.1-8.1-8.1    l0,0L41,0C18.4,0,0,18.4,0,41z"/>

</svg>

А вот код SVG, который я пытался использовать:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:mtc="http://www.make-the-cut.com/namespaces/make-the-cut" mtc:dpi="90" version="1.1" width="500px" height="82px" viewBox="0 0 500 82">

	<defs>
		<mask id="Mask" maskContentUnits="userSpaceOnUse">
			<rect width="200" height="200" fill="white" opacity="1"/>
			<path d="M22,40.5c0,3.5-2,4.5-4.5,4.5S13,43,13,40.5c0-2.5,2-4.5,4.5-4.5C20,36,22,38,22,40.5" />
		</mask>
	</defs>

	<foreignObject x="0" y="0" mask="url(#Mask)" width="500px" height="82">
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:mtc="http://www.make-the-cut.com/namespaces/make-the-cut" mtc:dpi="90" version="1.1" width="500px" height="82px" viewBox="0 0 159 82" preserveAspectRatio="none">
			
			<path fill-rule="evenodd" fill="#cc0000" d="M0,41L0,41c0,22.6,18.4,41,41,41l109.9,0c4.5,0,8.1-3.6,8.1-8.1c0,0,0,0,0,0l0-65.8c0-4.5-3.6-8.1-8.1-8.1    l0,0L41,0C18.4,0,0,18.4,0,41z"/>

		</svg>
	</foreignObject>

</svg>

Вопросы:

  1. Можно ли этого достичь? В чем проблема нынешнего подхода?
  2. Есть ли более подходящий способ сделать это?
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...