html - primaria - numeros decimales ejercicios

Clasificación por estrellas con SVG para calificación de punto decimal

Question

Tengo un código para crear una clasificación de estrellas. No he usado SVG antes y no puedo encontrar la forma de hacerlo para que haga lo siguiente:

• Calificación está fuera de 5
• Mostrar clasificaciones con el lugar decimal, es decir: 4.5, 3.2, 1.1, así como estrellas enteras
• Las estrellas clasificadas deben ser amarillas, las estrellas restantes deben ser grises

¿Cómo y qué cambio en el ejemplo para mover la clasificación de estrellas hacia la izquierda y hacia la derecha para obtenerlo? ¿Muestran las estrellas que sirven decimales?

Ejemplo de Fiddle: http://jsfiddle.net/apbuc773/10/

Código:

<svg height="210" width="500" fill="url(#g)">
<polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
203.042, 152.639,
176.756, 148.820,
165.000, 125.000,
153.244, 148.820,
126.958, 152.639,
145.979, 171.180,
141.489, 197.361,
165.000, 185.000" style="stroke: red;"/>
<linearGradient y2="0.9733" x2="1" id="g" x1="0.0167" y1="0.9833">
<stop stop-color="#F00" offset="0.4733"/>
<stop stop-color="rgb(255, 255, 255)" offset="0.5033"/>
</linearGradient>
</svg>

El código adjunto, ¿es todo esto necesario? Como habrá 5 estrellas en total, ¿puede simplificarse?

Gracias

Answer 1

Aquí está Fiddle with dots: http://jsfiddle.net/cnLHE/296/

Puede colocar un rectángulo debajo de los elementos enmascarados. En este violín, el rectángulo es ancho = 90, que es 90% (en la parte inferior).

<rect x="0" y="0" width="90" height="20" style="fill:#2498c7; mask: url(#mask5)"/>

Cambie el 90 a 55, por ejemplo, y el relleno subyacente reducirá el ancho.

Advertencia: eliminé este método porque no funcionaba bien con más de 20 instancias en la página. Por ejemplo, al cargar una grilla de productos calificados, el gráfico de calificaciones a veces desaparecería en Chrome. Los métodos de JS fueron más confiables.

Answer 2

Cambie los campos de desplazamiento de 0 (sin rellenar) a 1 (lleno) para mover la calificación.

No estoy seguro de por qué especifica el rojo de dos maneras diferentes o por qué tiene valores de compensación ligeramente diferentes.

Answer 3

Puede ajustar <linearGradient> con algunos JS simples. Ejemplo a continuación.

function setFraction(fraction)
{
document.getElementById("stop1").setAttribute("offset", fraction);
document.getElementById("stop2").setAttribute("offset", fraction);
}
setFraction(0.4);

<svg height="210" width="500">
<polygon points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
203.042, 152.639,
176.756, 148.820,
165.000, 125.000,
153.244, 148.820,
126.958, 152.639,
145.979, 171.180,
141.489, 197.361,
165.000, 185.000" style="stroke:red; fill:url(#g)"/>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
<stop id="stop1" stop-color="#F00" offset="0.5"/>
<stop id="stop2" stop-color="#fff" offset="0.5"/>
</linearGradient>
</svg>

Si quería evitar JS, podría crear 11 versiones diferentes de la estrella (sin rellenar, 0.1, 0.2 ... 0.9, llena) e incluir la correcta.