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>
Right and what did you try to do? It’s relatively simple that
– Otto
I already stored the class inside a variable and gave a
echo
within the tagpath
.I haven’t thought of another way yet.– KevinF
Enter the code of what Voce did
– Otto
How are you listing? Iterando com
PHP
same? How are you grouping the cities?– Marcelo de Andrade
@Otto I just tried that no big deal.
– KevinF
@Marcelodeandrade I have nothing in bank, nor am grouping anything.
– KevinF
The listing of all these thousands of cities is done manually?
– Marcelo de Andrade
@Marcelodeandrade Yes, it’s all in html but I already got it ready from an SVG file.
– KevinF
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 theID
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.– Daniel Omine
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.
– Neuber Oliveira
Like this? https://answall.com/questions/147884/sorteio-aleat%C3%B3rio-mas-com-diferentes-probabilities
– Jorge B.
Try to explain better what you want to do. You want to assign colors randomly by your svg?
– Jorge B.
Any update on the issue, @Kevin. F?
– Marcelo de Andrade
@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.– KevinF