我试图在svg中旋转图形,但我遇到了最困难的时间。
下面的图片是我试图实现的,通过切换原始宽度与高度但保持所有原始比例的旋转版本 我试过旋转单个物体并旋转完全打开但没有任何东西甚至远远接近最终结果。下面的屏幕截图来自我的前端网页,不幸的是,后端需要一个svg来在正确的位置打印标签。
让我知道是否还需要其他任何东西来解决此问题
把手模板:
<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>
完成的例子:
<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: '
Arial'
;
src: url('file:///G:/Work/NPGC/assets/fonts/Arial.ttf') format('
truetype'
);
}
</style>
</defs>
</svg>
&#13;
答案 0 :(得分:0)
当你说&#34;保持所有原始比例时,我并不确定你理解你的意思&#34;。我的解释是你指的是徽章宽度/高度的百分比。
写这个的最好方法是不是旋转单个组件,而是整个徽章:
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;
我逆时针旋转了纵向变体。如果这是一个问题,顺时针变换将读取
<meta.+content="320">
对于模板部件,您只需要区分徽章尺寸。两个徽章的所有内部尺寸保持不变。