0

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>

enter image description here

Improve this question
3
  • 1
    Your question is a little confusing. The SVG you included and the SVG you link to are different. It's not clear what you are trying to do because of that.
    – Paul LeBeau
    Commented Apr 30, 2019 at 15:07
  • The SVG posted in your question won't work as a stand-alone SVG file (ie included via <img> etc). That's because it needs to have the correct xmlns attribute ( xmlns="http://www.w3.org/2000/svg"). Use the linked file for comparison.
    – Paul LeBeau
    Commented Apr 30, 2019 at 15:11
  • 1
    Please don't make more work for other people by vandalizing your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the CC BY-SA 3.0 license, for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. If you want to know more about deleting a post please see: How does deleting work?
    – double-beep
    Commented Apr 30, 2019 at 18:36

1 Answer 1

Reset to default
1

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>

Improve this answer
1
  • 1
    I'm not very sure I understand you. Try adding the path for the B to the <g fill="white"> inside the mask.
    – enxaneta
    Commented Apr 30, 2019 at 14:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.