路径主体的文本剪切

时间:2016-07-11 18:41:57

标签: svg

我目前正在尝试创建旧图像的SVG,但是我无法创建正确的旋转和定位文本剪切块。
当我尝试添加<text>元素时,它会在表单下拉伸或根本不可见。
这是我到目前为止所提出的:

<svg 
    height="360px"
    width="100%"
    preserveAspectRatio="none"
    viewBox="0 0 100 360"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path 
            id="banner" 
            d="M0,186 L 100,0 100,186 0,360 Z" 
            fill="#2180b3" 
            vector-effect="non-scaling-stroke" />
    </defs>
    <use xlink:href="#banner" />
</svg>

以下是我要归档的内容:
Result
切口应为白色 谢谢!

1 个答案:

答案 0 :(得分:1)

你可以使用像this one

这样的svg转换器

&#13;
&#13;
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1280.000000pt" height="376.000000pt" viewBox="0 0 1280.000000 376.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.13, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,376.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M12700 3702 c-52 -7 -95 -14 -96 -15 -14 -22 -434 -961 -432 -966 2
-5 143 -157 313 -339 l310 -330 3 413 c1 227 1 602 0 832 l-3 418 -95 -13z"/>
<path d="M11785 3569 c-176 -26 -331 -49 -343 -51 -21 -3 0 -33 199 -283 184
-231 223 -276 230 -260 10 28 240 617 246 633 3 6 1 11 -3 11 -5 -1 -153 -23
-329 -50z"/>
<path d="M5440 2648 c-2989 -435 -5436 -792 -5438 -793 -1 -1 -1 -391 0 -866
l3 -864 5592 760 c3076 418 5596 765 5601 770 10 10 441 948 449 976 3 10
-122 155 -352 410 -319 353 -360 394 -388 396 -18 1 -2478 -354 -5467 -789z"/>
<path d="M11818 2058 c-75 -189 -135 -344 -134 -344 1 -2 669 88 732 98 18 2
-14 46 -208 283 -126 154 -234 286 -242 293 -10 10 -38 -52 -148 -330z"/>
</g>
</svg>
&#13;
&#13;
&#13;