Manipulating an SVG

asasass · October 1, 2018, 2:31pm

How difficult would it be to remove the lines in-between the boxes and make each box a different color, leaving just the black border intact with 3 different color cube squares?


    <svg class="playcover" height="198" viewbox="0 0 24 24" width="198">
    <path d="M22.7587891,5.0722656c-0.0148926-0.0089722-10.5439453-5.0239258-10.5439453-5.0239258 c-0.1367188-0.0644531-0.2929688-0.0644531-0.4296875,0c0,0-10.5291138,5.0149536-10.5439453,5.0239258 C1.0917969,5.1625977,1,5.3251953,1,5.5v12c0,0.1791992,0.0957031,0.3452148,0.2519531,0.434082l10.496582,5.9980469 c0,0,0.0003052,0.0003662,0.0004883,0.0004883l0.0006714,0.0001831l0.0022583,0.0012817l0.0003662-0.0006104 C11.8287964,23.9772339,11.9142456,24,12,24c0.0859375,0,0.1708984-0.0219727,0.2480469-0.065918l10.5-6 C22.9042969,17.8452148,23,17.6791992,23,17.5v-12C23,5.3251953,22.9082031,5.1625977,22.7587891,5.0722656z"></path>
    <g class="blue">
        <polygon points="12,1.0537109 15.961792,2.9403687 12,4.8269043 8.038208,2.9403687"></polygon>
        <polygon points="2.6185303,5.5213013 6.874939,3.4943848 10.8366699,5.3808594 6.3914795,7.4976196"></polygon>
        <polygon points="12,10.4353638 7.4994507,8.0779419 12,5.9348755 16.5005493,8.0779419"></polygon>
        <polygon points="13.1633301,5.3808594 17.125061,3.4943848 21.3814697,5.5213013 17.6085205,7.4976196"></polygon>
    </g>
    <g class="yellow">
        <polygon points="6,19.4956665 2,17.2099609 2,12.3265381 6,14.4217529"></polygon>
        <polygon points="11.5,16.173645 7,13.8164062 7,8.9453735 11.5,11.3026733"></polygon>
        <polygon points="6,13.2926025 2,11.1972656 2,6.3261719 6,8.4215698"></polygon>
        <polygon points="11.5,22.6384888 7,20.0670776 7,14.9455566 11.5,17.3027344"></polygon>
    </g>
    <g class="green">
        <polygon points="17,13.8164062 12.5,16.173645 12.5,11.3027344 17,8.9454346"></polygon>
        <polygon points="12.5,17.3027344 17,14.9455566 17,20.0668945 12.5,22.6381836"></polygon>
        <polygon points="22,17.2099609 18,19.4955444 18,14.4217529 22,12.3265381"></polygon>
        <polygon points="22,11.1972656 18,13.2926025 18,8.4215698 22,6.3261719"></polygon>
    </g></svg>

Gandalf · October 1, 2018, 3:02pm

I’m no expert with SVG but I guess the path is the black infill, and if you gave each polygon a different class that might do the job. Simples.

asasass · October 1, 2018, 3:38pm

I’m doing something wrong then.

Like this?

    <g class="bluea">
        <polygon points="12,1.0537109 15.961792,2.9403687 12,4.8269043 8.038208,2.9403687"></polygon></g>
      <g class="blueb">  <polygon points="2.6185303,5.5213013 6.874939,3.4943848 10.8366699,5.3808594 6.3914795,7.4976196"></polygon></g>
      <g class="bluec">  <polygon points="12,10.4353638 7.4994507,8.0779419 12,5.9348755 16.5005493,8.0779419"></polygon> </g>
      <g class="blued">  <polygon points="13.1633301,5.3808594 17.125061,3.4943848 21.3814697,5.5213013 17.6085205,7.4976196"></polygon>
    </g>

.bluea {
   fill: blue;
  
 }
 
  .blueb {
   fill: blue;
  
 }
 
  .bluec {
   fill: blue;
  
 }
 
  .blued {
   fill: blue;

asasass · October 1, 2018, 3:49pm

Like this?


    <g class="blue">
        <polygon points="12,1.0537109 15.961792,2.9403687 12,4.8269043 8.038208,2.9403687" class="a" ></polygon>
        <polygon points="2.6185303,5.5213013 6.874939,3.4943848 10.8366699,5.3808594 6.3914795,7.4976196" class="b"></polygon>
        <polygon points="12,10.4353638 7.4994507,8.0779419 12,5.9348755 16.5005493,8.0779419"  class="c"></polygon>
        <polygon points="13.1633301,5.3808594 17.125061,3.4943848 21.3814697,5.5213013 17.6085205,7.4976196"  class="d"></polygon>
    </g>

PaulOB · October 1, 2018, 4:08pm

You’ve made them all the same color? Change the fill color on each of those and the squares will change color.

asasass · October 1, 2018, 4:14pm

I want to remove the black X border, leaving no borders in the middle of the squares.

I know how to change the colors of the individual squares.

That deals with this part:

 <path d="M22.7587891,5.0722656c-0.0148926-0.0089722-10.5439453-5.0239258-10.5439453-5.0239258 c-0.1367188-0.0644531-0.2929688-0.0644531-0.4296875,0c0,0-10.5291138,5.0149536-10.5439453,5.0239258 C1.0917969,5.1625977,1,5.3251953,1,5.5v12c0,0.1791992,0.0957031,0.3452148,0.2519531,0.434082l10.496582,5.9980469 c0,0,0.0003052,0.0003662,0.0004883,0.0004883l0.0006714,0.0001831l0.0022583,0.0012817l0.0003662-0.0006104 C11.8287964,23.9772339,11.9142456,24,12,24c0.0859375,0,0.1708984-0.0219727,0.2480469-0.065918l10.5-6 C22.9042969,17.8452148,23,17.6791992,23,17.5v-12C23,5.3251953,22.9082031,5.1625977,22.7587891,5.0722656z"></path>

PaulOB · October 1, 2018, 4:29pm

You did that in your other post.

But as I mentioned already you coloured all 4 little squares blue in the css instead of a different colour for each,

I don’t know how to edit/construct paths in svgs so you will have to wait for someone familiar with svg comes along. You probably should just draw the whole thing again in your vector package and output the result.

asasass · October 1, 2018, 4:32pm

I had just found svgs where you can change the color of the 3 squares leaving the border intact.

coothead · October 1, 2018, 4:56pm

Hi there asasass,

I would have thought that after all this time in which you have
been using the “SVG element” in your projects, that you would
have been able to create that simple shape yourself.

 <svg  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 184 202">

   <polygon points="92,2 182,45 92,90 2,45" fill="#00f" stroke="#000" stroke-width="1"/>
   <polygon points="182,45 182,148 92,200 92,90" fill="#008000" stroke="#000" stroke-width="1"/>
   <polygon points="92,200 2,148 2,45 92,90" fill="#ff0" stroke="#000" stroke-width="1"/>

 </svg>

coothead

tensormonkey · October 1, 2018, 4:57pm

The problem is that those aren’t technically borders, but white space (black space in this case I suppose ). Instead of having four small polygons per face, just make one giant polygon composed of the points of the smaller ones.

Edit: Like coothead showed lol

asasass · October 1, 2018, 9:21pm

The color value here is meant to mean what?

<svg width="198px" height="198px" viewBox="0 0 24 24" stroke="#0059dd" stroke-width="0.36363636363636365" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#0059dd"> 

<circle cx="12" cy="12" r="10"/> 
<circle cx="12" cy="12" r="4"/> 

</svg>

I can change it to red and I’m not noticing anything.

color="red"

asasass · October 1, 2018, 9:35pm

I found out it’s use in this example.

svg {
  background:currentColor;
}

coothead · October 1, 2018, 10:34pm

Hi there asasass,

use this…

<svg 
   xmlns="http://www.w3.org/2000/svg" 
   version="1.1" 
   width="198px" 
   height="198px" 
   viewBox="0 0 24 24" 
   stroke="#0059dd" 
   stroke-width="0.36" 
   fill="#f00" 
   color="#0059dd" > 

<circle cx="12" cy="12" r="10"/> 
<circle cx="12" cy="12" r="4" /> 

</svg>

…or this…

 <svg  
   xmlns="http://www.w3.org/2000/svg" 
   version="1.1"
   width="198px" 
   height="198px"
   viewBox="0 0 24 24" > 

  <circle cx="12" cy="12" r="10" fill="#fff" stroke="#0059dd" stroke-width="0.36" /> 
  <circle cx="12" cy="12" r="4"  fill="#f00" stroke="#0059dd" stroke-width="0.36" /> 

 </svg>

…take your pick, according to your requirements.

coothead

asasass · October 2, 2018, 12:37am

These code values have no effect on the code?

stroke-linecap="square" 
stroke-linejoin="miter"

coothead · October 2, 2018, 8:34am

They have absolutely no effect on your particular code.

This information was pointed out in each of the MDN articles.

coothead

As a presentation attribute, it can be applied to any element
but it has effect only on the following seven elements:

altGlyph, path, polyline, text, textPath, tref, and tspan

asasass · October 2, 2018, 12:53pm

It came with these:

It gave that style to every single one of them to choose from.

But now I see it doesn’t need it.

system · January 1, 2019, 7:53pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.