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.