¿Cómo puedo mantener el ancho de fuente constante en SVG en diferentes sistemas operativos y navegadores?

Estoy tratando de agregar algo de texto a un archivo SVG. El texto es dinámico y se muestra sobre un rectángulo que actúa como fondo.

Dado que el texto es dinámico, el ancho del rectángulo de fondo también debe ser dinámico. Entonces, para ser consistente, estoy usando una fuente monoespaciada de ancho fijo (Droid Sans Mono) y calculo el ancho del rectángulo de fondo usando la expresión - (x*6.4)+4), donde xes el número de caracteres en el texto, y se agrega 4 para relleno (2 a la izquierda, 2 a la derecha). Además, suponiendo que ese 6.4sea el ancho promedio de cada carácter en la Droid Sans Monofuente (solo una suposición).

Entonces, para el texto Ruby on Rails, el número de caracteres es 13, por lo que el ancho del rectángulo de fondo es 13*6.4+4 = 87.2.

El cual funciona perfectamente en navegadores (Firefox y Chromium) en Ubuntu . Sin embargo, cuando se ve en los mismos navegadores (Firefox y Chrome) en Windows , el texto desborda el rectángulo.

Entonces, mi pregunta es, ¿cómo puedo asegurarme de que la imagen tenga un aspecto uniforme en diferentes sistemas operativos? La imagen tiene un aspecto consistente en todos los navegadores en el mismo sistema operativo.

Incluyo una imagen de ejemplo como referencia:

Imagen SVG como referencia

ACTUALIZAR

Tal vez debería reformular mi pregunta: dentro de un archivo SVG, ¿cómo puedo hacer que una fuente de ancho fijo tome la misma cantidad de píxeles en todas las plataformas, asumiendo que el archivo SVG no se ve afectado por ningún estilo CSS externo y el nivel de zoom es normal?

Además, entiendo que existen tecnologías alternativas (PNG, etc.), pero no todas las preguntas de SVG deben terminar reemplazándolo con PNG . También más que una solución, me interesa entender por qué existe este problema con SVG. Estoy usando una fuente de ancho fijo que se supone que debe tomar la misma cantidad de píxeles en todos los sistemas operativos (¿Es esta suposición incorrecta? ¿Por qué? ¿Qué puedo hacer al respecto?).

capturas de pantalla

Ubuntu 12.04 amd64 / Firefox 13

Captura de pantalla de Firefox/Ubuntu

Ubuntu 12.04 amd64 / cromo 18

Captura de pantalla de Chromium / Ubuntu

Windows 7 de 32 bits (dentro de VirtualBox) / Google Chrome 18

Captura de pantalla de Google Chrome / Windows

Windows 7 de 32 bits (dentro de VirtualBox) / Firefox 13

Captura de pantalla de Firefox / Windows

En primer lugar, lo más probable es que haga algo como esto jsfiddle.net/lollero/6tuSH En segundo lugar, esto me parece más una pregunta de stackoverflow. En tercer lugar, si usa una imagen, puede usar pocas imágenes para repetir las partes que necesitan ser flexibles, o hacerlo lo suficientemente ancho para dejar espacio para crecer y esperar lo mejor... (aunque yo usaría .png's )
@Lollero: el problema aquí es que está calculando el tamaño y no funciona. Esto sucederá independientemente del método utilizado para crear una parte flexible de la imagen.
@horatio No dije que la flexibilidad arreglaría las diferencias de tamaño de la fuente (el zoom también puede crear algunos problemas con esta configuración de svg en algunos navegadores), pero puede solucionar el problema que surge de eso, que es el texto que rompe el áreas coloreadas. Más aún en mi ejemplo jsfiddle ya que es flexible tanto horizontal como verticalmente.
..y también me gusta tener flexibilidad donde cuenta. Realmente no sé el caso de uso para esto, pero ¿y si de repente hay 200 votos? El texto no cabría dentro del área de color verde, pero si fuera flexible, encajaría como anillo al dedo sin importar cuántos votos tuviera. Ese sería probablemente el ejemplo más práctico de por qué este intento actual tal vez fallaría (dependiendo del caso de uso de esto, por supuesto).
Cuando llegué a casa, me di cuenta de que mi ejemplo no funcionaba en Firefox y... eso me molestó muchísimo, aunque es solo un ejemplo. Aquí está jsfiddle.net/lollero/6tuSH/3 (me di cuenta de que en este violín, hice algunas cosas bastante extrañas, pero... Me iré ahora... :D)
Está calculando el espacio, por lo que presumiblemente "200 votos" encajaría según la fórmula que proporcionó. ( tachado-- 1` Note also that your jsfiddle example wraps to two lines on my browser (breaks between y vote).`--) La solución real es no confiar en el lado del cliente si es posible en mi opinión, pero esta no es la pregunta que se hace.
@Horatio sí, no funcionó correctamente, pero ¿eso significa que no pudo? No. En lo que respecta a su pregunta, mi punto es que es inútil responder la pregunta exacta, porque resolver el problema que tiene es mucho más fácil por otros medios.
lo mismo podría decirse de la solución del OP.
@Horatio Entonces, ¿está diciendo que debido a que mi prueba de concepto no funcionó a la perfección, la solución exacta que OP está pidiendo sería mejor? No trabajo para él, ¿sabes? Todavía estoy muy convencido de que sería mucho más fácil usar un método como el de mi jsfiddle, o similar.
Mi conjetura es que la "fuente de ancho fijo" no está disponible en todos los sistemas, por lo que se está sustituyendo por alguna otra fuente de ancho fijo.
@Scott, la fuente de ancho fijo "Droid Sans Mono" está incrustada dentro de la imagen SVG usando @font-face.

Respuestas (1)

Dado que solo ha vinculado el SVG y no proporcionó una captura de pantalla para mostrar cuál es su problema, solo puedo guiarme por lo que veo. La imagen que se muestra en la pregunta se representa incorrectamente porque no es el tipo de letra adecuado, por lo que su representación está desactivada porque su cálculo se basa en un tamaño y espaciado de letra diferente (veo Courier). Si veo el SVG en una pestaña nueva (o sigo el enlace para el enlace directo), se representa correctamente con Droid Sans Mono y el tamaño de rectángulo adecuado.

Básicamente, su problema es un problema de CSS en el que un contenedor principal o un método de llamada incorrecto borran el tipo de letra. En este sentido, estaría de acuerdo con Lollero en que está fuera de tema para GD.

Una forma de manejar esto es almacenar el archivo de fuente en su servidor y renderizarlo usando llamadas PHP GD (bastante trivial). Puede almacenar el resultado con una suma de verificación, etc., de modo que vuelva a representar la imagen solo si el texto cambia y, de lo contrario, use la copia almacenada.

EDITAR:___________

Una captura de pantalla de su archivo svg en win7 64bit firefox:

La captura de pantalla

El contenido de texto sin formato de su archivo SVG (XML)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" height="14">
  <defs>
    <style type="text/css">
      <![CDATA[
        @import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);
      ]]>
    </style>
    <linearGradient id="g1">
      <stop stop-color="#222" offset="0%"/>
      <stop stop-color="#444" offset="100%"/>
    </linearGradient>
    <linearGradient id="g2">
      <stop stop-color="#2a2" offset="0%"/>
      <stop stop-color="#0a0" offset="100%"/>
    </linearGradient>
  </defs>

    <!-- Extra rectangles on left & right for the rounded corners -->
    <rect x="0" y="0" width="16" height="14" fill="#222" rx="4" ry="4"/>
    <rect x="129.6" y="0" width="8" height="14" fill="#0a0" rx="4" ry="4"/>

  <rect x="4" y="0" width="87.2" height="14" fill="url(#g1)" />
  <rect x="91.2" y="0" width="42.4" height="14" fill="url(#g2)" />

  <text x="6.0" y="10" font-size="10.5" font-family="'Droid Sans Mono', monospace" text-anchor="start" fill="#fff">Ruby on Rails</text>
  <text x="93.2" y="10" font-size="10.5" font-family="'Droid Sans Mono', monospace" text-anchor="start" fill="#fff">1 vote</text>
</svg>
Hola @horatio, actualicé mi pregunta como comentario a tu respuesta. Además, me gustaría aclarar que estoy incrustando la imagen dentro de una página usando la <img />etiqueta, por lo que el CSS externo no debería afectar (AFAIK). También he incluido capturas de pantalla. Gracias.
Edité la respuesta con algunas cosas. (1) es un archivo xml y puede ver la declaración CSS apuntando a fonts.googleapis.com (línea 6). Esto no se cumple por alguna razón y el resultado es que su navegador no tiene el archivo de fuente. (2) La captura de pantalla es como se ve el archivo SVG (con el tipo de letra adecuado). Sin embargo, la "versión incrustada" que se muestra en el cuerpo de su pregunta anterior parece ser el tipo de letra courier y se parece mucho a sus capturas de pantalla.
¿Cómo puedo mantener el ancho de fuente constante en SVG en diferentes sistemas operativos y navegadores?
RespuestasAquíPolítica de privacidad1y, 0v