Масштабировать различные части SVG-файла по-разному

Question

Мне нужна переменная высота svg-графика для билета с зазубренными краями. Верхний и нижний сегменты должны масштабироваться до размера, поддерживая фиксированное соотношение сторон, в то время как средний сегмент должен растягиваться, чтобы соответствовать размеру контейнера.

Это изображение должно быть иллюстративным

Я нашел this jsFiddle делает довольно много, что я хотел бы только горизонтально, а не вертикально, но я не очень хорошо разбирается достаточно с ViewBox, чтобы понять, что происходит и адаптируя его для моих нужд. Мне просто удалось испортить мой файл.

В настоящее время svg-файл очень прост; верхний путь, нижний путь и прямоугольник посередине. Это выглядит так:

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="464px" height="464px" viewBox="0 0 464 464" enable-background="new 0 0 464 464" xml:space="preserve"> 
    <path fill="#FFF100" d="M432.846,10.522c-5.755,0.057-10.466-4.562-10.522-10.316c-0.001-0.069-0.001-0.137,0-0.206h-20.839 
     c0.057,5.754-4.563,10.465-10.316,10.522c-5.755,0.057-10.466-4.562-10.522-10.316c0-0.069,0-0.137,0-0.206h-20.843 
     c0.058,5.754-4.561,10.465-10.315,10.522S339.021,5.96,338.965,0.206c0-0.069,0-0.137,0-0.206h-20.836 
     c0.057,5.754-4.562,10.465-10.316,10.522c-5.754,0.057-10.465-4.562-10.522-10.316c0-0.069,0-0.137,0-0.206h-20.437 
     c0,24.772-20.082,44.853-44.854,44.853c-24.771,0-44.853-20.081-44.853-44.853H166.71c0.056,5.754-4.562,10.465-10.317,10.522 
     c-5.754,0.057-10.465-4.562-10.521-10.316c-0.001-0.069-0.001-0.137,0-0.206h-20.839c0.098,5.754-4.486,10.498-10.24,10.596 
     c-5.754,0.099-10.498-4.486-10.596-10.24c-0.002-0.119-0.002-0.238,0-0.356H83.355c0.057,5.754-4.563,10.465-10.317,10.522 
     S62.573,5.96,62.517,0.206c0-0.069,0-0.137,0-0.206H41.677c0.057,5.754-4.562,10.465-10.316,10.522 
     C25.607,10.579,20.896,5.96,20.839,0.206c-0.001-0.069-0.001-0.137,0-0.206H0v56h464V0h-20.839 
     C443.219,5.754,438.6,10.465,432.846,10.522z"/> 
    <path fill="#FFF100" d="M432.846,453.478c-5.755-0.056-10.466,4.563-10.522,10.317c-0.001,0.068-0.001,0.137,0,0.205h-20.839 
     c0.057-5.754-4.563-10.466-10.316-10.522c-5.755-0.056-10.466,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.843 
     c0.058-5.754-4.561-10.466-10.315-10.522c-5.755-0.056-10.466,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.836 
     c0.057-5.754-4.562-10.466-10.316-10.522c-5.754-0.056-10.465,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.437 
     c0-24.771-20.082-44.854-44.854-44.854c-24.771,0-44.853,20.082-44.853,44.854H166.71c0.056-5.754-4.562-10.466-10.317-10.522 
     c-5.754-0.056-10.465,4.563-10.521,10.317c-0.001,0.068-0.001,0.137,0,0.205h-20.839c0.098-5.754-4.487-10.498-10.24-10.597 
     c-5.754-0.098-10.498,4.486-10.596,10.24c-0.002,0.119-0.002,0.238,0,0.356H83.355c0.057-5.754-4.563-10.466-10.317-10.522 
     c-5.754-0.056-10.465,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205H41.677c0.057-5.754-4.562-10.466-10.316-10.522 
     c-5.754-0.056-10.465,4.563-10.521,10.317c-0.001,0.068-0.001,0.137,0,0.205H0v-56h464v56h-20.839 
     C443.219,458.246,438.6,453.534,432.846,453.478z"/> 
    <rect y="56" fill="#00AEEF" width="464" height="352"/> 
</svg> 

Я был бы очень рад, если бы кто-то смог мне помочь.

Answer 1

Как правило, вы не можете масштабировать некоторые части SVG иначе, чем другие. Однако есть несколько простых случаев (например, изображение карандаша, с которым вы связаны), где вы можете быть сложным и построить тот, который работает.

Как это работает карандаш

Она начинается с определением <symbol> элемента для каждого из трех частей карандаша: конец, тела и острого конца.

Затем он объединяет их, добавляя три ребенка: <svg> элементов. В задней части тела <symbol> растянута вся ширина основного <svg>. Затем передняя часть двух торцевых крышек <svg>. Каждая торцевая крышка <svg> занимает половину ширины. Но у них есть атрибуты preserveAspectRatio, которые приводят к тому, что они выравниваются соответственно с левым и правым концами.

Если мы делаем две концевые части почти полностью полупрозрачным, вы можете увидеть, что происходит:

:checked~svg{ 
 
    width:500px; 
 
}

<input type="checkbox"/><br/> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <defs> 
 
\t \t <g id="source"> 
 
\t \t \t <rect width="200" height="100" fill="yellow"/> 
 
\t \t \t <circle cx="50" cy="50" r="40" fill="red"/> 
 
\t \t \t <rect x="50" y="10" width="100" height="80" fill="orange"/> 
 
\t \t \t <path d="M150,10L190,50 150,90z" fill="pink"/> 
 
\t \t </g> 
 
\t \t <symbol id="left" viewBox="0 0 50 100" preserveAspectRatio="none"> 
 
\t \t \t <use xlink:href="#source"/> 
 
\t \t </symbol> 
 
\t \t <symbol id="middle" viewBox="50 0 100 100" preserveAspectRatio="none"> 
 
\t \t \t <use xlink:href="#source"/> 
 
\t \t </symbol> 
 
\t \t <symbol id="right" viewBox="150 0 50 100" preserveAspectRatio="none"> 
 
\t \t \t <use xlink:href="#source"/> 
 
\t \t </symbol> 
 
\t </defs> 
 
\t <svg viewBox="0 0 1 1" preserveAspectRatio="none"> 
 
\t \t <use xlink:href="#middle" width="1" height="1"/> 
 
\t </svg> 
 
\t <svg viewBox="0 0 1 2" preserveAspectRatio="xMinYMid"> 
 
\t \t <use xlink:href="#left" width="1" height="2" opacity="0.1"/> 
 
\t </svg> 
 
\t <svg viewBox="0 0 1 2" preserveAspectRatio="xMaxYMid"> 
 
\t \t <use xlink:href="#right" width="1" height="2" opacity="0.2"/> 
 
\t </svg> 
 
</svg>

Вы можете увидеть, как тело было растянуто на всю ширину и как концевые крышки располагаются на концах, чтобы скрыть растянутое тело.

Этот трюк работает только потому, что карандаш имеет сплошной фон (желтый). Но я предполагаю, что вы хотите, чтобы перфорированные концы вашего билета были прозрачными, так что трюк не сработает для вас. Если с ним все будет хорошо, то это будет.

Что может быть проще для вас, так это просто собрать три части друг над другом.

<svg> (the top of the ticket) 
<div> (containing the ticket body contents) 
<svg> (the bottom of the ticket)