SVG +把手 - 旋转图形并调整比例

时间:2018-05-30 21:46:24

标签: svg handlebars.js

我试图在svg中旋转图形,但我遇到了最困难的时间。

下面的图片是我试图实现的,通过切换原始宽度与高度但保持所有原始比例的旋转版本 我试过旋转单个物体并旋转完全打开但没有任何东西甚至远远接近最终结果。下面的屏幕截图来自我的前端网页,不幸的是,后端需要一个svg来在正确的位置打印标签。

让我知道是否还需要其他任何东西来解决此问题

屏幕截图显示打印机外观如何: Screenshot of how it would look coming out of your printer

所需的最终结果(佩戴在您身上的徽章): Desired End Result (badges to wear on your person)

把手模板:

<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="{{paper.width}}{{paper.unit}}" height="{{paper.height}}{{paper.unit}}" viewBox="0 0 {{paper.width}} {{paper.height}}">

  {{#each papers}}
    <g transform="translate({{leftOffset}}, {{topOffset}})">
      {{#each badges}}
        <!--Badge {{@index}}-->
        <g transform="translate({{leftOffset}}, {{topOffset}})">
            <svg width="{{width}}" height="{{height}}" viewBox="0 0 {{width}} {{height}}">
              {{#each objects}}
                {{#if placeholder}}
                  <!--Text: {{placeholder}}-->
                  <svg x="{{x}}"  y="{{y}}" width="{{width}}" height="{{height}}">
                      <text x="{{leftOffset}}" y="{{topOffset}}" text-anchor="{{alignment}}" font-size="{{fontSize}}" font-family="{{fontName}}" font-weight="{{fontWeight}}" font-style="{{fontStyle}}" fill="{{fontColor}}" transform="rotate({{rotation}} {{rotationX}} {{rotationY}})">
                          {{value}}
                      </text>
                  </svg>
                {{else}}
                  {{#if background}}
                  <!--Background: {{name}}-->
                  {{else}}
                    {{#if isDropdown}}
                      <!--Image: {{value}}-->
                    {{else}}
                      {{#if file}}
                        <!--Image: Uploaded - {{cid}}-->
                      {{else}}
                        <!--Image: {{name}}-->
                      {{/if}}
                    {{/if}}
                  {{/if}}
                  <svg preserveAspectRatio="{{aspectRatio}}" x="{{leftOffset}}" y="{{topOffset}}" width="{{width}}" height="{{height}}" viewBox="0 0 {{backWidth}} {{backHeight}}">
                    <image xlink:href="{{href}}" x="0" y="0" width="100%" height="100%" transform="rotate({{rotation}} {{rotationX}} {{rotationY}})"/>
                  </svg>
                {{/if}}
              {{/each}}
            </svg>
        </g>
      {{/each}}
    </g>
  {{/each}}

    <defs>
        <style type="text/css">
          {{#each googleFonts}}
            <link xmlns="http://www.w3.org/1999/xhtml" href="{{url}}" rel="stylesheet" type="text/css" />
          {{/each}}
          {{#each fonts}}
            {{fontFace}}
          {{/each}}
        </style>
    </defs>
</svg>

完成的例子:

&#13;
&#13;
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="8.267in" height="11.692in" viewBox="0 0 8.267 11.692">
    
        <g transform="translate(0.27906, 1.62367)">
            <!--Badge 0-->
            <g transform="translate(0, 0)">
                <svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114">
                            <!--Image: belgian-flag(2).jpg-->
                      <svg preserveAspectRatio="none" x="1.2888000000000002" y="0.172" width="0.4915" height="0.4988" viewBox="0 0 226 400">
                        <image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="0" y="0" width="100%" height="100%" transform="rotate(90 200 113)"/>
                      </svg>
<!--Image: Albania.png-->
<svg preserveAspectRatio="xMidYMid meet" x="2.3009999999999997" y="0.2335" width="0.5038" height="0.5036" viewBox="0 0 48 48">
                        <image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="0" y="0" width="100%" height="100%" transform="rotate(90 24 24)"/>
                      </svg>
<!--Text: Name-->
<svg x="1.5157" y="0.2712" width="2.0202" height="0.48227999999999993">
                          <text x="2.1817" y="0.3122" text-anchor="end" font-size="0.2225" font-family="Arial" font-weight="400" font-style="normal" fill="#000000" transform="rotate(90 1.0101 0.24113999999999997)">
                              DFGHDFGH
                          </text>
                      </svg>
<!--Text: Title-->
<svg x="1.5526" y="1.2349" width="2.0202" height="0.47652">
                          <text x="1.2227999999999999" y="0.2818833333333333" text-anchor="end" font-size="0.16666666666666666" font-family="Arial" font-weight="400" font-style="italic" fill="#000000" transform="rotate(90 1.0101 0.23826)">
                              dfghdgh
                          </text>
                      </svg>
</svg>
</g>
<!--Badge 1-->
<g transform="translate(3.8548, 0)">
  <svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114">
                            <!--Image: belgian-flag(2).jpg-->
                      <svg preserveAspectRatio="none" x="0.4193" y="1.3148" width="0.4924" height="0.5027" viewBox="0 0 400 226">
                        <image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="0" y="0" width="100%" height="100%" transform="rotate(0 113 200)"/>
                      </svg>
  <!--Image: Albania.png-->
  <svg preserveAspectRatio="xMidYMid meet" x="0.4808" y="0.3016" width="0.5078" height="0.5027" viewBox="0 0 48 48">
                        <image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="0" y="0" width="100%" height="100%" transform="rotate(0 24 24)"/>
                      </svg>
  <!--Text: Name-->
  <svg x="1.5119" y="0.2707" width="2.02212" height="0.48263999999999996">
                          <text x="1.6851" y="0.3261" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000" transform="rotate(0 1.01106 0.24131999999999998)">
                              DFGHDF
                          </text>
                      </svg>
  <!--Text: Title-->
  <svg x="1.5504" y="1.2375" width="2.02212" height="0.4732799999999999">
                          <text x="1.6851" y="0.2805333333333333" text-anchor="end" font-size="0.16666666666666666" font-family="Arial" font-weight="400" font-style="italic" fill="#000000" transform="rotate(0 1.01106 0.23663999999999996)">
                              ghdfghdfgh
                          </text>
                      </svg>
  </svg>
</g>
</g>

<defs>
  <style type="text/css">
    @font-face {
      font-family: &#x27;
      Arial&#x27;
      ;
      src: url(&#x27;file:///G:/Work/NPGC/assets/fonts/Arial.ttf&#x27;) format(&#x27;
      truetype&#x27;
      );
    }
  </style>
</defs>
</svg>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

当你说&#34;保持所有原始比例时,我并不确定你理解你的意思&#34;。我的解释是你指的是徽章宽度/高度的百分比。

写这个的最好方法是不是旋转单个组件,而是整个徽章:

  1. 以横向比例定义一个徽章,以纵向比例定义另一个徽章。为两者设置相应的宽度,高度和viewBox。
  2. 内容元素获得两种变体的相同属性:x和y适用于所有变体,图像的宽度和高度均获得百分比值。
  3. 然后旋转并翻译肖像徽章,使其位于横向徽章下方。
  4. &#13;
    &#13;
    int main(void) {
            int p[2];
            pipe(p);
            char *arg[] = {"ls","sort",NULL};
            if(fork()==0) {
                    close(0);/* close the stdin stream so that this 
    process shoulbn't read from stdin */
                    dup(p[0]);/* read from read end of pipe */
                    close(p[1]);
                    execlp(arg[1],arg[1],(char*)NULL);
            }
            else{
                    close(1);/* close the stdout stream, so that o/p shouldn't print on monitor */
                    dup(p[1]); /*  stdout result redrecting to write end of pipe */
                    close(p[0]);
                    execlp(arg[0],arg[0],(char*)NULL);
            }
            return 0;
    }
    
    &#13;
    &#13;
    &#13;

    我逆时针旋转了纵向变体。如果这是一个问题,顺时针变换将读取

    <meta.+content="320">
    

    对于模板部件,您只需要区分徽章尺寸。两个徽章的所有内部尺寸保持不变。