У меня есть SVG, размер которого мне удалось изменить, установив preserveAspectRatio
в none
. Проблема в том, что когда я изменяю размер этого изображения, замаскированное отверстие слева также сжимается, и цель состоит в том, чтобы изменить только path
, но не mask
.
Влево оригинал и правый размер изменен
Оригинал 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>
Вопросы:
- Можно ли этого достичь? В чем проблема нынешнего подхода?
- Есть ли более подходящий способ сделать это?