maxkern
maxkern

Reputation: 31

SVG Icon path doesn't show

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

Upvotes: 0

Views: 1262

Answers (1)

enxaneta
enxaneta

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

Related Questions