특정 위치에서 SVG 내에서 크기가 조정 된

Question

저는 복잡한 SVG를 처음 접하고 뭔가 작업하고 도움이 필요합니다. 몇 가지 SVG 파일은 이미 내용으로 적절하게 형식화되어 있습니다. 선, 사각형, 텍스트 등이 있습니다. 간단한 X =, Y =, X1 =, Y1 =로 그려지고 그냥 정수를 기반으로합니다. 원본 SVG는 인쇄용으로 설계되었으며 x/y 위치는 300dpi로 인쇄되도록 설정되었습니다.

그래서 이것은 다른 원본에서 오는 몇 개의 SVG와 함께 존재하며 새로운 단일 SVG 문서로 병합하려고합니다. 그래서,이 요소들 중 하나는 인치 또는 센티미터 (지금까지 읽은 것에서)를 기준으로 위치 (x, y)에 놓아야하지만, 특정 크기를 존중해야합니다. 높이 2 인치, 폭 3.4 인치.

원본 SVG는 정수 만 사용하고 "인치"에 대한 방향이 없기 때문에 어떻게 할 수 있습니까? 또는 자체 확장 할 수있는 방법은 무엇입니까?

적절한 SVG 구문이 없으면 여기에 기본적으로 몇 가지 세부 사항이 있습니다.

SVG1은 476,100 SVG2 0,0의 전체 X/Y 사각형 영역을 갖는다 273,24

새로운 SVG 0,0의 전체 X/Y 사각형 영역으로 "4 할 필요가있는 6 "

예 : 위의 1/4"아래쪽, 1 "위치에서 SVG1을 삽입해야하며 476x100이지만 약 1/2"높이의 영역으로 조정해야합니다 x 3 "너비.

비슷하게, 위치 "2.8", 1.75 "에서 , SVG2를 삽입해야하며 그 크기는 최대 2", 2.5 "넓이 여야합니다.

크기 조정 가능하지만 비뚤어 짐이 없으므로 원래 비율을 유지하고 잘리지 않아야합니다. 기본적인 이해를 얻을 수 있다면 최종 치수를 조정할 수 있습니다.이 작업의 인프라를 얻는 방법을 모르겠습니다.

감사합니다.

Answer 1

나는 SVG에 대해 관심이 많고 비교적 새로운 경우를 대비하여 마침내 많이 놀았습니다. 질문에서와 같이 X, Y Height, Width 설정이 숫자 값을 기반으로하고 인치, 센티미터 등의 문맥이없는 미리 생성 된 SVG 출력 파일을 일부 생성했지만 내 요구 사항은 주어진 X 인치 Y 인치 범위.

"defs"태그에 대해 알아 냈습니다.이 태그는 나중에 SVG 본문의 "여기에 넣으십시오"라는 변수로 사용할 수 있습니다. SVG의 TOP에서 나는 필요한 차원을 줄 수있었습니다. 그런 다음 그룹화를 위해 "g"태그를 사용하여 주어진 x, y 위치에 숫자를 위치시킬 수 있습니다. 그런 다음, "defs"섹션에 선언 된 "변수"의 비율을 적용하기 위해 또 다른 "g"를 수행했습니다 ("g"요소에는 두 개의 "변형"태그가있을 수 없습니다).

내가 생각해 낸 것은 아래와 같았습니다. 자세한 설명이 SVG를 다루는 연구에서 다른 사람들을 도울 수 있기를 바랍니다.

<?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

    <!-- Explicitly define the SVG window area as 4 inches by 6 inches --> 
    <svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="4in" height="6in" > 

    <!-- Add some styles, fonts etc for line drawing, labels and data --> 
    <style type="text/css" > 
     <![CDATA[ 

      line.Black 
      { stroke:RGB(0,0,0); 
       stroke-width:2; 
      } 

      text.Hdr 
      { 
       font-family: Arial; 
       font-size:x-small; 
       stroke: #000000; 
       stroke-width:.4; 
      } 

      text.Data 
      { 
       font-family: Courier New; 
       font-size:normal; 
       stroke: #000000; 
       stroke-width:.5; 
      } 
     ]]> 
    </style> 


    <!-- all these "defs" are zero-based position for their own content 
     and will be speicifcally placed where needed via "g" tags. 
     The simple "id" name will be used as an "insert <something> here" --> 
    <defs> 
     <!-- Below will come from actual data from system 
      The "ID" is what becomes the "variable" that is later 
      used later in the SVG as the "put me here" --> 
     <g id="DataOneElement" > 
      <text class="Data">SOME TEXT DATA</text> 
     </g> 

     <!-- This partial linear barcode generated somewhere else 
      Notice these are just integer positions, and nothing 
      to do with specific "inches" measurements. Also, they 
      start at position 0,0 and go however large they need. 
      When applied with the "g" positioning, thats where it 
      starts, then gets scaled from there if needed bigger/smaller --> 
     <g id="DataPartialBarCode" > 
      <rect x="0" y="0" width="1" height="50" /> 
      <rect x="4" y="0" width="1" height="50" /> 
      <rect x="6" y="0" width="3" height="50" /> 
      <rect x="10" y="0" width="3" height="50" /> 
      <rect x="14" y="0" width="1" height="50" /> 
      <rect x="16" y="0" width="3" height="50" /> 
      <rect x="20" y="0" width="3" height="50" /> 
      <rect x="24" y="0" width="1" height="50" /> 
      <rect x="26" y="0" width="1" height="50" /> 
      <rect x="30" y="0" width="1" height="50" /> 
      <rect x="32" y="0" width="1" height="50" /> 
      <rect x="34" y="0" width="1" height="50" /> 
      <rect x="38" y="0" width="3" height="50" /> 
     </g> 

     <!-- Actual data generated from AMS to populate these too. 
      Notice here too, the entire address starts as position 0,0 --> 
     <g id="SampleAddress" > 
      <text class="Data" x="0" y="0">Some Person's Name</text> 
      <text class="Data" x="0" y="17">First Address Line</text> 
      <text class="Data" x="0" y="30">Another Address</text> 
      <text class="Data" x="0" y="43">3rd Address line</text> 
      <text class="Data" x="0" y="56">And Testing for longer address content</text> 
     </g> 

     <!-- another bar code that will generated --> 
     <g id="AnotherBarCode" > 
      <rect x="0" y="0" width="1" height="70" /> 
      <rect x="4" y="0" width="1" height="70" /> 
      <rect x="6" y="0" width="3" height="70" /> 
      <rect x="10" y="0" width="3" height="70" /> 
      <rect x="14" y="0" width="1" height="70" /> 
      <rect x="16" y="0" width="3" height="70" /> 
      <rect x="20" y="0" width="1" height="70" /> 
      <rect x="24" y="0" width="1" height="70" /> 
      <rect x="26" y="0" width="1" height="70" /> 
      <rect x="28" y="0" width="3" height="70" /> 
      <rect x="32" y="0" width="1" height="70" /> 
      <rect x="36" y="0" width="1" height="70" /> 
      <rect x="38" y="0" width="3" height="70" /> 
      <rect x="42" y="0" width="3" height="70" /> 
      <rect x="46" y="0" width="1" height="70" /> 
     </g> 
    </defs> 

    <!-- Now, starting the drawing of the SVG... 
     Border around entire box drawing area 
     Notice these are in specific INCH dimensions... --> 
    <line class="Black" x1="0in" y1="0in" x2="4in" y2="0in" /> 
    <line class="Black" x1="0in" y1="0in" x2="0in" y2="6in" /> 
    <line class="Black" x1="4in" y1="0in" x2="4in" y2="6in" /> 
    <line class="Black" x1="0in" y1="6in" x2="4in" y2="6in" /> 


    <!-- Translate is Across then Down from the top/left corner of SVG --> 
    <!-- Translate is NOT based on inch, cm, or other measurements 
     so you may have to tweak these numbers --> 
    <g transform="translate(100 20) "> 
     <!-- Now, take whatever we are providing and scale it within the area. 
      In this case, scale the ENTIRE "g" object to 1.5 its original size --> 
     <g transform="scale(1.75)"> 
      <!-- This is where the "defs" variable declaration comes 
       in, as looking at the "g" tag by the ID name --> 
      <use xlink:href="#DataOneElement" /> 
     </g> 
    </g> 

    <!-- and now the partial barcode "defs" variable --> 
    <g transform="translate(20 23) "> 
     <!-- In this case, scale the width by 115% and the height by 95% --> 
     <g transform="scale(1.15 .95)"> 
      <use xlink:href="#DataPartialBarCode" /> 
     </g> 
    </g> 


    <!-- Any other specific lines within the area --> 
    <line class="Black" x1="0in" y1=".8in" x2="4in" y2=".8in" /> 

    <!-- Now, just insert the "defs" from above at a scale that will still be readable. 
     Cool thing, the entire address is considered a single element here. --> 
    <g transform="translate(20 97)"> 
     <g transform="scale(.7)"> 
      <use xlink:href="#SampleAddress" /> 
     </g> 
    </g> 


    <!-- We can even show the address AGAIN, scaled differently elsewhere. --> 
    <g transform="translate(2 250)"> 
     <g transform="scale(1.3)"> 
      <use xlink:href="#SampleAddress" /> 
     </g> 
    </g> 

    <!-- Another line and then barcode--> 
    <line class="Black" x1="0in" y1="1.55in" x2="4in" y2="1.55in" /> 

    <g transform="translate(175 175) "> 
     <!-- Scale this barcode 100% wide, but only 70% height --> 
     <g transform="scale(1 .7)"> 
      <use xlink:href="#AnotherBarCode" /> 
     </g> 
    </g> 
</svg>