Skaluj różne części pliku SVG inaczej

Question

Potrzebuję svg-grafiki o zmiennej wysokości dla biletu z ząbkowanymi krawędziami. Segmenty górny i dolny powinny być skalowane do rozmiaru, zachowując stały współczynnik proporcji, podczas gdy środkowy segment powinien rozciągać się do rozmiaru pojemnika.

Ten obraz powinien być ilustracyjne

znalazłem this jsFiddle robi dość dużo, co chciałbym tylko poziomo zamiast pionowo, ale nie jestem na tyle obeznany z viewbox aby zrozumieć, co się dzieje i dostosowując go do moich potrzeb. Po prostu udało mi się zepsuć mój plik.

Mój plik svg jest bardzo prosty w tej chwili; górna ścieżka, dolna ścieżka i prostokąt w środku. Wygląda to tak:

<?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> 

Byłbym bardzo szczęśliwy, gdyby ktoś był w stanie mi pomóc.

Answer 1

Generalnie nie można przeskalować niektórych części pliku SVG inaczej niż inne. Istnieją jednak proste przypadki (takie jak obraz ołówka, z którym się łączysz), w których możesz być trudny i skonstruować taki, który działa.

Jak działa że ołówek

Zaczyna się od zdefiniowania elementu <symbol> dla każdej z trzech części: koniec ołówka, ciała i ostrym końcem.

Następnie łączy je, dodając trzy elementy potomne: <svg>. Z tyłu znajduje się ciało <symbol> rozciągnięte na całej szerokości głównej <svg>. Następnie dwa elementy końcowe są umieszczone z przodu. Każda zaślepka końcowa <svg> zajmuje połowę szerokości. Ale mają atrybuty "preserveAspectRatio", co powoduje, że są odpowiednio wyrównane do lewego i prawego końca.

Jeśli zrobimy dwie części końcowe niemal całkowicie przezroczyste, można zobaczyć, co się dzieje:

: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>

Można zobaczyć jak organizm został rozciągnięty na całą szerokość i jak na końcach umieszczone są zaślepki, aby ukryć rozciągnięte ciało.

Ta sztuczka działa tylko dlatego, że ołówek ma stałe tło (żółty). Ale zakładam, że chcesz, aby perforowane końce twojego biletu były przezroczyste, więc sztuczka nie zadziała dla ciebie. Jeśli jesteś w porządku z tym, że jest biały, to będzie.

Najprawdopodobniej dla ciebie prostsze jest ułożenie trzech części jedna na drugiej.

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