Svg Viewbox sollte die Schriftgröße nicht ändern?

Ich verwende svg mit viewBox für Anpassung an den Behälter seine Arbeit in Ordnung, wenn ich den Behälter der svg Kreis und Text die Größe sind Ändern der Größe und in den Behälter passen, aber ich möchte nicht den Text size, um die Größe, wenn ich den Container Größe ändern Ich habe viel gesucht, aber keine wertvollen Vorschläge gefunden.Svg Viewbox sollte die Schriftgröße nicht ändern?

Ich brauche div und svg Kreis, um die Größe sollte die Größe, sondern Text sollte die Schriftgröße nicht die Größe und auch sollte Text bewegen zusammen mit dem Kreis.

sollten Irgendwelche Vorschläge geschätzt.

Im Folgenden ist der SVG ich in meiner Anwendung bin

<div id="container"> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 920 620" preserveAspectRatio="none" style="overflow: hidden; position: relative;"> 
     <circle cx="100" cy="100" r="100" fill="green"></circle> 
     <text x="100" y="100" text-anchor="middle" font="18px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="20px" font-style="italic" font-weight="800" font-family="Times New Roman" opacity="1.0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: italic; font-variant: normal; font-weight: 800; font-size: 18px; line-height: normal; font-family: 'Times New Roman'; opacity: 1;"> 
      <tspan dy="5.828125" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Circle</tspan> 
     </text> 
     </svg> 
</div>

Hier ist die Demo

Hinweis: Ändern der Größe der jsFiddle

Quelle

2013-08-13 karthik

In [diese Demo] (http://stackoverflow.com/questions/ 10473328/how-to-draw-nicht-skalierbaren-Kreis-in-svg-mit-javascript) ich einige JavaScript liefern, die die Transformationen auf ausgewählte Elemente dynamisch ändern können, um sie zu skalieren unabhängig wie die Seite zoomt. – Phrogz

Es tut uns leid. Es gibt keine Möglichkeit, das zu tun, was Sie wollen. Es gibt eine Funktion von SVG 1.2 genannt TransformRef (http://www.w3.org/TR/SVGTiny12/coords.html#transform-ref), die in dieser Situation nützlich sein könnte, aber leider wird es von keinem der Browser AFAIK unterstützt.

Quelle

2013-08-13 13:33:06

das Sichtgerät aus dem Wurzel svg-Tages verschieben und in einen verschachtelten svg-Tag. Setzen Sie den Text außerhalb des verschachtelten svg-Tag und das Sichtgerät hat keinen Einfluss auf den Text-Tag

<div id="container"> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"> 
     <svg viewBox="0 0 920 620" preserveAspectRatio="none"> 
      <circle cx="100" cy="100" r="100" fill="green"></circle> 
     </svg> 
     <text x="100" y="100" text-anchor="middle" font="18px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="20px" font-style="italic" font-weight="800" font-family="Times New Roman" opacity="1.0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: italic; font-variant: normal; font-weight: 800; font-size: 18px; line-height: normal; font-family: 'Times New Roman'; opacity: 1;"> 
      <tspan dy="5.828125" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Circle</tspan> 
     </text> 
</svg>

Example

Quelle

2014-01-11 00:59:31 Brandon

Das Beispiel scheint das Problem nicht zu beheben. Text schrumpft immer noch, wenn der Kreis schrumpft. –

Svg Viewbox sollte die Schriftgröße nicht ändern?

Antwort

Verwandte Themen