Reputation: 31
i have this svg-path as an header-icon. Now i want to add a letter to the path by using the gimp-method discussed here, but everytime i add the path for the "B" nothing is showing up. Any advice on what i am doing wrong? Here's the current (working) code and an image of what i'm trying to get.
Also, here is the .svg i'm using. Maybe there's something wrong with the svg itself and therefore i don't get the right paths in the text-file?
Hope someone is able to help me out with this issue.
<svg viewBox="0 0 259 190"><title>Header Icon</title>
<defs>
<linearGradient id="grd" x2="100%" y2="100%" >
<stop offset="0%" stop-color="#000000"></stop>
<stop offset="25%" stop-color="#bd2478"></stop>
<stop offset="35%" stop-color="#54bdff"></stop>
<stop offset="55%" stop-color="#96a318"></stop>
<stop offset="100%" stop-color="#000000"></stop>
</linearGradient>
<mask id="msk">
<g fill="white">
<path d="M82.908,66.963c0,13.656,0.293,27.323-0.197,40.963
c-0.13,3.606-1.778,8.003-4.258,10.547c-18.482,18.958-37.344,37.546-56.108,56.229c-1.053,1.049-2.228,2.576-3.467,2.703
c-2.113,0.216-5.052,0.212-6.277-1.038c-1.141-1.165-0.869-4.14-0.509-6.193c0.224-1.278,1.677-2.414,2.729-3.464
c17.794-17.769,35.544-35.581,53.491-53.194c2.879-2.825,3.889-5.643,3.863-9.589c-0.162-25.312-0.095-50.628-0.062-75.942
c0.003-2.149-0.281-4.591,0.615-6.368c0.949-1.882,2.993-4.146,4.841-4.433c3.271-0.508,5.05,2.112,5.257,5.317
c0.193,2.985,0.079,5.992,0.081,8.989C82.911,43.314,82.908,55.139,82.908,66.963z"/>
<path d="M134.135,67.524c0,13.986,0.044,27.973-0.051,41.959
c-0.014,1.923-0.347,4.012-1.152,5.734c-8.87,18.968-17.852,37.883-26.844,56.793c-0.777,1.635-1.494,3.862-2.86,4.519
c-1.983,0.951-4.805,1.446-6.739,0.722c-1.163-0.435-1.948-3.617-1.77-5.454c0.215-2.209,1.557-4.338,2.545-6.438
c7.993-16.993,16.092-33.937,23.955-50.988c1.202-2.608,1.901-5.696,1.918-8.566c0.146-25.143,0.055-50.286,0.124-75.429
c0.009-3.142,0.108-6.413,1.005-9.371c0.491-1.622,2.967-3.979,4.137-3.764c2.002,0.367,3.909,2.292,5.398,3.969
c0.727,0.818,0.561,2.552,0.563,3.872c0.034,14.147,0.021,28.295,0.021,42.443C134.302,67.524,134.219,67.524,134.135,67.524z"/>
<path d="M236.904,97.508c0,23.484,0.017,46.968-0.027,70.452
c-0.004,2.139,0.213,4.638-0.778,6.317c-1.103,1.868-3.404,3.981-5.311,4.11c-1.435,0.097-3.737-2.516-4.446-4.382
c-0.905-2.386-0.788-5.232-0.783-7.881c0.087-46.296,0.225-92.593,0.355-138.889c0.005-1.665-0.097-3.351,0.128-4.989
c0.429-3.137,2.161-5.855,5.443-5.072c2.007,0.479,3.778,2.987,5.081,4.963c0.697,1.058,0.202,2.917,0.202,4.415
c0.006,23.651,0.004,47.304,0.004,70.955C236.816,97.508,236.86,97.508,236.904,97.508z"/>
<path d="M185.084,66.376c0,13.488,0.006,26.977-0.008,40.465
c-0.002,1.495,0.436,3.379-0.289,4.401c-1.293,1.822-3.18,4.057-5.083,4.341c-1.436,0.214-3.658-2.087-4.823-3.761
c-0.829-1.191-0.636-3.201-0.638-4.846c-0.032-26.477-0.044-52.954,0.017-79.431c0.005-2.303,0.055-4.841,1.004-6.83
c0.76-1.593,3.046-3.624,4.425-3.466c1.825,0.209,3.826,2.09,4.988,3.777c0.804,1.168,0.393,3.225,0.396,4.884
C185.094,39.399,185.084,52.888,185.084,66.376z"/>
</g>
</mask>
</defs>
<g style="mask: url(#msk)">
<rect x="-2000" y="0" width="2259" height = "2000" fill='url(#grd)' >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 2000,0; 0,0"
begin="0s"
calcMode="linear"
dur="10s"
repeatCount="indefinite" />
</rect>
</g>
</svg>
Upvotes: 0
Views: 1262
Reputation: 33044
You need to add the path for the B outside the masked group like so:
<svg viewBox="0 0 259 190"><title>Header Icon</title>
<defs>
<linearGradient id="grd">
<stop offset="0" stop-color="black" />
</linearGradient>
<mask id="msk">
<g fill="white">
<path d="M82.908,66.963c0,13.656,0.293,27.323-0.197,40.963
c-0.13,3.606-1.778,8.003-4.258,10.547c-18.482,18.958-37.344,37.546-56.108,56.229c-1.053,1.049-2.228,2.576-3.467,2.703
c-2.113,0.216-5.052,0.212-6.277-1.038c-1.141-1.165-0.869-4.14-0.509-6.193c0.224-1.278,1.677-2.414,2.729-3.464
c17.794-17.769,35.544-35.581,53.491-53.194c2.879-2.825,3.889-5.643,3.863-9.589c-0.162-25.312-0.095-50.628-0.062-75.942
c0.003-2.149-0.281-4.591,0.615-6.368c0.949-1.882,2.993-4.146,4.841-4.433c3.271-0.508,5.05,2.112,5.257,5.317
c0.193,2.985,0.079,5.992,0.081,8.989C82.911,43.314,82.908,55.139,82.908,66.963z"/>
<path d="M134.135,67.524c0,13.986,0.044,27.973-0.051,41.959
c-0.014,1.923-0.347,4.012-1.152,5.734c-8.87,18.968-17.852,37.883-26.844,56.793c-0.777,1.635-1.494,3.862-2.86,4.519
c-1.983,0.951-4.805,1.446-6.739,0.722c-1.163-0.435-1.948-3.617-1.77-5.454c0.215-2.209,1.557-4.338,2.545-6.438
c7.993-16.993,16.092-33.937,23.955-50.988c1.202-2.608,1.901-5.696,1.918-8.566c0.146-25.143,0.055-50.286,0.124-75.429
c0.009-3.142,0.108-6.413,1.005-9.371c0.491-1.622,2.967-3.979,4.137-3.764c2.002,0.367,3.909,2.292,5.398,3.969
c0.727,0.818,0.561,2.552,0.563,3.872c0.034,14.147,0.021,28.295,0.021,42.443C134.302,67.524,134.219,67.524,134.135,67.524z"/>
<path d="M236.904,97.508c0,23.484,0.017,46.968-0.027,70.452
c-0.004,2.139,0.213,4.638-0.778,6.317c-1.103,1.868-3.404,3.981-5.311,4.11c-1.435,0.097-3.737-2.516-4.446-4.382
c-0.905-2.386-0.788-5.232-0.783-7.881c0.087-46.296,0.225-92.593,0.355-138.889c0.005-1.665-0.097-3.351,0.128-4.989
c0.429-3.137,2.161-5.855,5.443-5.072c2.007,0.479,3.778,2.987,5.081,4.963c0.697,1.058,0.202,2.917,0.202,4.415
c0.006,23.651,0.004,47.304,0.004,70.955C236.816,97.508,236.86,97.508,236.904,97.508z"/>
<path d="M185.084,66.376c0,13.488,0.006,26.977-0.008,40.465
c-0.002,1.495,0.436,3.379-0.289,4.401c-1.293,1.822-3.18,4.057-5.083,4.341c-1.436,0.214-3.658-2.087-4.823-3.761
c-0.829-1.191-0.636-3.201-0.638-4.846c-0.032-26.477-0.044-52.954,0.017-79.431c0.005-2.303,0.055-4.841,1.004-6.83
c0.76-1.593,3.046-3.624,4.425-3.466c1.825,0.209,3.826,2.09,4.988,3.777c0.804,1.168,0.393,3.225,0.396,4.884
C185.094,39.399,185.084,52.888,185.084,66.376z"/>
</g>
</mask>
</defs>
<g style="mask: url(#msk)">
<rect x="-2000" y="0" width="2259" height = "2000" fill='url(#grd)' >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 2000,0; 0,0"
begin="0s"
calcMode="linear"
dur="10s"
repeatCount="indefinite" />
</rect>
</g>
<path id="letterB" d="M141.864,42.852c2.736-0.576,7.057-1.008,11.449-1.008c6.264,0,10.297,1.08,13.32,3.528
c2.521,1.872,4.033,4.752,4.033,8.568c0,4.681-3.097,8.785-8.209,10.657v0.144c4.608,1.152,10.009,4.968,10.009,12.169
c0,4.176-1.656,7.345-4.104,9.721c-3.384,3.096-8.856,4.537-16.777,4.537c-4.32,0-7.633-0.288-9.721-0.576V42.852z M148.129,62.726
h5.688c6.624,0,10.513-3.457,10.513-8.137c0-5.688-4.32-7.921-10.657-7.921c-2.88,0-4.536,0.216-5.544,0.432V62.726z
M148.129,85.983c1.224,0.216,3.024,0.288,5.256,0.288c6.48,0,12.457-2.376,12.457-9.433c0-6.625-5.688-9.361-12.528-9.361h-5.185
V85.983z"/>
</svg>
Upvotes: 1