Dynamic php css

Asked

Viewed 82 times

0

Well, I have a map in SVG and I need to color some cities, but I need to do it dynamically because there are a thousand cities. It will be about 4 colors and each group with such cities will be of one color. I wonder if there is any way to put the class without having to manual each php. I accept suggestions in JS also.

Below an example of the code:

CSS:

.red{
  color: red;
}

Code:

 <?php 
    $g1 = 'class="red"';
 ?> 
<svg id="svg_mapa" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" stroke="#000" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 962" fill="none">
  <div class="map">
    <path id="svg_4300034" <?php echo $g1; ?> d="m427.99 682.37l9.47 8.28 0.2 1.35 3.99 2.18 0.91 2.62 1.58 0.66 3.18-1.98 2.47-2.79 2.29-0.18 2.81 2.57 2.31 0.09 2.24 1.01 0.14 0.53-1.28 2.1 0.61 0.78 2.43 1.37 0.23-0.06-0.34-2.68-0.35-0.35 1.95-3.32 0.59-1.53-0.08-3.2 2.18-3.44-0.02-0.06-0.03-0.03 0.55-2.88-1.28-1.61-0.73-2.88 2.37 0.59 0.08-0.04-0.06-0.18-1.09-2.46-1.63-1.13h-1.47l-1.49-1.89-2.8 0.1 0.02-1.34-0.45-1.49 0.91-2.07 0.51-3.88 0.7-0.99-0.07-2.53 0.42-2.02-0.93-3.94 0.4-2.62 0.75-1.55-0.99-2.72 0.19-0.75-1.05-1.91-0.9-1.05 0.08-1.05-1.39-2.38 0.67-2.02 0.59-0.46-0.17-1.01 0.42-1.46 1.75-1.58 0.7-1.02 0.16-0.2h-0.09l-1.08 0.73-1.56 2.08-2.14 1.95-2.15 1.57-3.31-2.1 1.6-2.37-1.55-0.95-0.95-1.73-0.39 0.04-2.17-2.43-0.2-2.2-2.83-1.34v-1.59l-2.04-0.84-1.16 0.68-0.4 1.61-2.62 5.31-3.52 1.29-0.83-1.12-5.26 4.11-0.02 0.42-3.41 0.11-3.09-0.88-2.35 3.04-0.02 2.26-2.69 1.38-0.59 2.09-1.03 0.93 0.2 0.9-1.07 0.9-2.11-0.45-1.71 0.9-1.02 0.11-1.22 2.04-0.52 0.33-0.92 2.02-0.84 0.65-0.24 0.9-0.96 0.18-0.14 0.82-2.05 0.69-0.56 0.98-1.46-0.5-0.85 0.62 29.07 25.36z">
      <title>ACEGUÁ</title>
    </path>
    <path id="svg_4300059" <?php echo $g1; ?> d="m711.72 152.24l-0.9-0.42-3.55 0.21-1.68-0.5-0.96-1.68-4.24 0.57-0.26-0.1-0.22-0.28-1.46 0.83-0.72 1.66-0.81 1.05 0.46 0.64-1.74 1.03 0.39 0.69 1.21 0.82-0.8 0.87-1.62 0.48-0.44 0.82-3.05 0.27-1.06 0.7v-1.01l-1.67 0.96 0.06 2.46 1.39 0.55 0.85 2.01 0.73 0.39 0.95 1.87-0.59 0.39-0.32 0.05 0.75 0.83 1.25-1.73 0.39 0.81-0.62 1.78 0.5 1.26 1.34 1.5 0.34 1.14 1.33-0.55 0.68 0.51 0.56 3.83 2.43-0.22 2.95-0.24 1.15 0.4 1.51 0.23 0.77-0.39 0.35-0.17 3.12-1.76 1.9-0.14 0.93 0.14 0.51-1.74-0.22-0.44 0.14-2.25-0.53-0.72-0.88-2.5 0.86 0.69 0.48-1.51-0.26-1.2 0.72-1.91-0.95-2.11 0.69-0.72-0.81-0.71 1.11-0.92 0.55-1.57-1.46-1.79 0.69-0.87-0.59-1-1.16-0.14-0.34-1.08-0.13-0.07z">
      <title>ÁGUA SANTA</title>
    </path>
    <path id="svg_4300109" d="m544.36 343.94l-0.19 0.28-0.21 2.88-0.86 0.64-1 1.5 0.26 1.91-1.44 1.82-1.8 1.06 0.78 1.5 2.79 1.92-0.48 1.7 0.13 1.12 1.5 0.88 1.32 1.2-1.36 1.47-1.2-1.06-1.13 0.95-0.47 0.96-1.26 0.75-1.79-1.32-0.59-0.08-1.42 1.13-0.3 0.68 0.19 0.29 1.17 0.25-1.12 1.76 0.39 1.72 0.91 1.05 1.58-0.06 2.95 1.93 1.35-0.79-0.11-0.81 0.87-0.35 1.84 3.02-0.54 0.95 0.01 2.42-0.68 1.81 2.1-0.79 2.63 1.15-0.65 2.55-1.14 0.02-2.06 3.36-0.78 0.77 1.44 0.96 1.06-0.35 0.51 0.54-1.3 1.16-0.2 0.66 1.58 0.44 3.4 1.83 1 0.77 0.51 1.2 1.98 0.52 1.04 0.95 0.97-1.86 0.06-1.39 0.6-1.39 0.13-1.77 1.24-3 0.45-0.24v-0.13l0.7-0.12-0.83-0.74-1.54 0.39-1.2-0.21-1.42-2.81-1.36-1.66 1.35-3.01-0.45-1.68 1.17-1.18 0.06-3.44 2.04 0.05 0.14-5.44 4.11 0.13 0.44-0.86 0.03-2.02 0.67-0.63 1.08 0.02 0.07-7.09 3.88 0.03 0.55-0.14 3.27 0.15 0.81 0.85 1.33 0.81 0.59-1.53 1.28-0.73 0.55 0.19 1.34-0.19-0.09-0.13-0.41 0.05-0.69-0.9-1.71-1-1.53-0.23-1.63-1.56-2.13 0.01-0.33-1.77-4.79-3.04-0.27-0.13-5.03-3.26-2.54-1.03-1.8 0.7-1.06-0.51-0.63 0.18-1.9-1.07-1.3-1.57-1.58-0.16h-0.27l-0.42 0.28-1.88 0.23-0.36-0.47-0.56 2.03 1.29 1.83-1.31 0.9-0.39 0.44z">
       <title>AGUDO</title>
    </path>
  </div>
</svg>
php css
  • 1

    Right and what did you try to do? It’s relatively simple that

  • I already stored the class inside a variable and gave a echo within the tag path.I haven’t thought of another way yet.

  • Enter the code of what Voce did

  • How are you listing? Iterando com PHP same? How are you grouping the cities?

  • @Otto I just tried that no big deal.

  • @Marcelodeandrade I have nothing in bank, nor am grouping anything.

  • The listing of all these thousands of cities is done manually?

  • @Marcelodeandrade Yes, it’s all in html but I already got it ready from an SVG file.

  • 1

    To automate you need to have this data organized even in an array. An idea would be to have a relationship between cities and their respective colors. Example, in tag <path> has the ID that I know it is unique. So, a simple way is to create a Javascript array right where you will have these Ids and their respective colors. So in Javascript you iterate in this array (loop) where the colors are set. This is very simple. The major job is to create this array manually. But depending on how the data is, you can even automate the creation of the array.

  • if I’m not absurdly mistaken svg is nothing more than an xml, so you can put it in an xml file and parse it with php, then Voce can modify the content and put the attrributos that Voce needs, in class="red" etc... after a modified xml echo.

  • Like this? https://answall.com/questions/147884/sorteio-aleat%C3%B3rio-mas-com-diferentes-probabilities

  • Try to explain better what you want to do. You want to assign colors randomly by your svg?

  • Any update on the issue, @Kevin. F?

  • @Maecelo de Andrade Yes, I played all coordinators in the bank and created groups for them, gave a foreach in the database table bringing me the coordinates with their respective groups and assigning a css class to each group with a certain color.

Show 9 more comments

1 answer

0

Since you’re doing this manually, the only way I can see is for you to group the path in a grouping element g and assigning colors by groups: 

#grupo-1 path {
  fill: blue;
}
#grupo-2 path {
  fill: red;
}
#grupo-3 path {
  fill: green;
}
#grupo-4 path {
  fill: yellow;
}
<svg id="svg_mapa" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" stroke="#000" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 962" fill="none">
  <g id="grupo-1">
    <path id="svg_4300034" d="m427.99 682.37l9.47 8.28 0.2 1.35 3.99 2.18 0.91 2.62 1.58 0.66 3.18-1.98 2.47-2.79 2.29-0.18 2.81 2.57 2.31 0.09 2.24 1.01 0.14 0.53-1.28 2.1 0.61 0.78 2.43 1.37 0.23-0.06-0.34-2.68-0.35-0.35 1.95-3.32 0.59-1.53-0.08-3.2 2.18-3.44-0.02-0.06-0.03-0.03 0.55-2.88-1.28-1.61-0.73-2.88 2.37 0.59 0.08-0.04-0.06-0.18-1.09-2.46-1.63-1.13h-1.47l-1.49-1.89-2.8 0.1 0.02-1.34-0.45-1.49 0.91-2.07 0.51-3.88 0.7-0.99-0.07-2.53 0.42-2.02-0.93-3.94 0.4-2.62 0.75-1.55-0.99-2.72 0.19-0.75-1.05-1.91-0.9-1.05 0.08-1.05-1.39-2.38 0.67-2.02 0.59-0.46-0.17-1.01 0.42-1.46 1.75-1.58 0.7-1.02 0.16-0.2h-0.09l-1.08 0.73-1.56 2.08-2.14 1.95-2.15 1.57-3.31-2.1 1.6-2.37-1.55-0.95-0.95-1.73-0.39 0.04-2.17-2.43-0.2-2.2-2.83-1.34v-1.59l-2.04-0.84-1.16 0.68-0.4 1.61-2.62 5.31-3.52 1.29-0.83-1.12-5.26 4.11-0.02 0.42-3.41 0.11-3.09-0.88-2.35 3.04-0.02 2.26-2.69 1.38-0.59 2.09-1.03 0.93 0.2 0.9-1.07 0.9-2.11-0.45-1.71 0.9-1.02 0.11-1.22 2.04-0.52 0.33-0.92 2.02-0.84 0.65-0.24 0.9-0.96 0.18-0.14 0.82-2.05 0.69-0.56 0.98-1.46-0.5-0.85 0.62 29.07 25.36z">
      <title>ACEGUÁ</title>

    </path>

    <path id="svg_4300059" d="m711.72 152.24l-0.9-0.42-3.55 0.21-1.68-0.5-0.96-1.68-4.24 0.57-0.26-0.1-0.22-0.28-1.46 0.83-0.72 1.66-0.81 1.05 0.46 0.64-1.74 1.03 0.39 0.69 1.21 0.82-0.8 0.87-1.62 0.48-0.44 0.82-3.05 0.27-1.06 0.7v-1.01l-1.67 0.96 0.06 2.46 1.39 0.55 0.85 2.01 0.73 0.39 0.95 1.87-0.59 0.39-0.32 0.05 0.75 0.83 1.25-1.73 0.39 0.81-0.62 1.78 0.5 1.26 1.34 1.5 0.34 1.14 1.33-0.55 0.68 0.51 0.56 3.83 2.43-0.22 2.95-0.24 1.15 0.4 1.51 0.23 0.77-0.39 0.35-0.17 3.12-1.76 1.9-0.14 0.93 0.14 0.51-1.74-0.22-0.44 0.14-2.25-0.53-0.72-0.88-2.5 0.86 0.69 0.48-1.51-0.26-1.2 0.72-1.91-0.95-2.11 0.69-0.72-0.81-0.71 1.11-0.92 0.55-1.57-1.46-1.79 0.69-0.87-0.59-1-1.16-0.14-0.34-1.08-0.13-0.07z">
      <title>ÁGUA SANTA</title>
    </path>
  </g>
  <g id="grupo-2">
    <path id="svg_4300109" d="m544.36 343.94l-0.19 0.28-0.21 2.88-0.86 0.64-1 1.5 0.26 1.91-1.44 1.82-1.8 1.06 0.78 1.5 2.79 1.92-0.48 1.7 0.13 1.12 1.5 0.88 1.32 1.2-1.36 1.47-1.2-1.06-1.13 0.95-0.47 0.96-1.26 0.75-1.79-1.32-0.59-0.08-1.42 1.13-0.3 0.68 0.19 0.29 1.17 0.25-1.12 1.76 0.39 1.72 0.91 1.05 1.58-0.06 2.95 1.93 1.35-0.79-0.11-0.81 0.87-0.35 1.84 3.02-0.54 0.95 0.01 2.42-0.68 1.81 2.1-0.79 2.63 1.15-0.65 2.55-1.14 0.02-2.06 3.36-0.78 0.77 1.44 0.96 1.06-0.35 0.51 0.54-1.3 1.16-0.2 0.66 1.58 0.44 3.4 1.83 1 0.77 0.51 1.2 1.98 0.52 1.04 0.95 0.97-1.86 0.06-1.39 0.6-1.39 0.13-1.77 1.24-3 0.45-0.24v-0.13l0.7-0.12-0.83-0.74-1.54 0.39-1.2-0.21-1.42-2.81-1.36-1.66 1.35-3.01-0.45-1.68 1.17-1.18 0.06-3.44 2.04 0.05 0.14-5.44 4.11 0.13 0.44-0.86 0.03-2.02 0.67-0.63 1.08 0.02 0.07-7.09 3.88 0.03 0.55-0.14 3.27 0.15 0.81 0.85 1.33 0.81 0.59-1.53 1.28-0.73 0.55 0.19 1.34-0.19-0.09-0.13-0.41 0.05-0.69-0.9-1.71-1-1.53-0.23-1.63-1.56-2.13 0.01-0.33-1.77-4.79-3.04-0.27-0.13-5.03-3.26-2.54-1.03-1.8 0.7-1.06-0.51-0.63 0.18-1.9-1.07-1.3-1.57-1.58-0.16h-0.27l-0.42 0.28-1.88 0.23-0.36-0.47-0.56 2.03 1.29 1.83-1.31 0.9-0.39 0.44z">
      <title>AGUDO</title>
    </path>
  </g>

</svg>

Browser other questions tagged php css

You are not signed in. Login or sign up in order to post.