Dynamic CSS php

Question

Dynamic CSS php

Navigation

#1 by (0 votes)

0

Well, I have a map in SVG and need to color some cities, but I need to do it dynamically because there are many cities a thousand cities. There will be 4 colors and each group with such cities will be one color. I was wondering if some way to put class without having to per manual on each one in php . I accept suggestions on JS too.

Below is 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

asked by anonymous 19.08.2016 / 16:21

1 answer

Error in Handler.obtainMessage XtraReport - View report but do not print

score 0 · Answer 1

As you are doing this manually, the only way I see it is to group the path into 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>