Farklı SVG dosyası bölümlerini farklı ölçeklendirme

Question

Tırtıklı kenarları olan bir bilet için değişken yükseklikte svg grafiğe ihtiyacım var. Üst ve alt bölümler, sabit bir en-boy oranını korurken, orta bölüm konteynerin boyutuna uyacak şekilde gerdirilmelidir.

Bu görüntü ben sadece dikey yerine yatay ne istiyorsunuz hemen hemen yapıyor this jsFiddle buldum ama ne olup bittiğini anlamak için izleme kutusu ile yeterli kadar bilgili değilim ve

açıklayıcı olmalıdır ihtiyaçlarıma göre uyarlamak. Sadece dosyamı dağıtmayı başardım.

Benim svg dosya şu anda çok basit; bir üst yol, bir alt yol ve ortadaki bir doğrultu. Şöyle görünüyor:

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

Birisi bana yardım edebilecek olsaydı çok mutlu olurdum.

Answer 1

Genelde SVG'nin bazı bölümlerini diğerlerinden farklı ölçekleyemezsiniz. Bununla birlikte, zor olabileceğiniz ve işe yarayan bir yapı oluşturduğunuz bazı basit durumlar (bağlandığınız kalem görüntüsü gibi) vardır. Sonunda, beden ve keskin uca: o kalem

nasıl çalışır

Bu kalem üç bölümden her biri için bir <symbol> elemanı tanımlayarak başlar.

Üç çocuk <svg> öğelerini ekleyerek bunları birleştirir. Arka tarafta, <symbol> gövdesi, ana <svg>'un tüm genişliğini uzatmıştır. Daha sonra iki uç kapağı <svg> elemanları öne yerleştirilmiştir. Her bir uç başlığı <svg> genişliğinin yarısını kaplar. Ancak, sırasıyla, sağ ve sol uçlara hizalanmalarıyla sonuçlanan 'korumaAspectRatio' özelliklerine sahiptirler.

iki uç kısımlarını neredeyse tamamen saydam yaparsanız, ne olup bittiğini görebilirsiniz:

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

Sen vücut tüm genişliği ve nasıl üzere gerilmiş olan nasıl görebilirsiniz Uçları gerilmiş gövdeyi gizlemek için uçlara yerleştirilir.

Bu hile yalnızca, kalemin sağlam bir arka planı (sarı) olduğu için çalışır. Ama sanırım senin biletin delikli uçlarının şeffaf olmasını istiyorsun, bu yüzden numara senin için çalışmayacak. Eğer onunla beyaz olursanız, o zaman olacaktır.

Sizin için muhtemelen daha basit olan şey, üç parçanın birbirinin üzerine yığılmasıdır.

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