常連

拍手喝采

自己紹介

pythonで、whileを使って自動対戦させて情報を集めるコードを作っています。
そのwhileを外（他のスクリプト）から止めさせたいのです。
```python
#　main.py
import defs
while defs.GAME == 0:
    ~
    ~
```
```python
#　defs.py
GAME = 0
def finish():
    global GAME
    GAME = 1
```
この状態で　defs.py　の　finish()　を発動しても、　while　から抜けてくれませんでした。
　main.py の方で print(defs.GAME) として　GAME　の中身を調べてみたのですが、ずっとゼロでした。

これを解決するために、例えば　main.py　に常に　defs.py　を読み込んでもらってGAMEの変化に気づいてもらう方法や、もしくは上手にwhileを止められる方法はございますでしょうか？

だいぶ抽象的な質問ですみません。よろしくお願いします。

whileループを外から抜けさせる方法

#実現したい事
枠線を引いたあとで中を塗るアニメーションを維持したまま、その後でマウスオーバーしたら色を変更するsvgの実装
# 不具合/試したこと
cssファイルの下2つの要素が機能せずマウスオーバーしても変化がありません。
divで囲ってclassやidで指定したり、pathの中で指定したり試したのですがいずれでも実現できませんでした。
もしわかる方がいましたらお願い致します。

# link.html
```ここに言語を入力
<html>
    <head>
        <link rel="stylesheet" href="css/link.css">
        <title>
            リンク
        </title>
    </head>
    <body>
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1740 577">
            <a href="https://note.com/">
                <path data-name="noteicon" d="M180.388501,169.6969 L180.388501,155.318324 C180.388501,152.698052 180.524171,151.824229 180.927578,150.479979 C182.005733,146.784785 185.646008,144.030448 189.958629,144.030448 C194.27125,144.030448 197.910324,146.851818 198.988479,150.479979 C199.393087,151.824229 199.528757,152.698052 199.528757,155.318324 L199.528757,177.490682 C199.528757,178.834933 199.528757,180.177986 199.258618,181.388171 C198.517837,184.747003 195.485075,187.771866 192.114939,188.510426 C190.902315,188.778558 189.554021,188.778558 188.205726,188.778558 L165.966674,188.778558 C163.33852,188.778558 162.462069,188.644492 161.113775,188.241097 C157.474701,187.166175 154.644843,183.538015 154.644843,179.238327 C154.644843,174.937443 157.474701,171.309283 161.113775,170.234361 C162.462069,169.830966 163.33852,169.6969 165.966674,169.6969 L180.388501,169.6969 Z M259.642514,270.215259 L140.357486,270.215259 L140.357486,165.464245 C140.357486,164.119995 140.829329,162.97804 141.773015,162.037184 L172.705744,131.196024 C173.64943,130.256366 174.79482,129.785938 176.143114,129.785938 L259.642514,129.785938 L259.642514,270.215259 Z M273.18909,106.134066 C272.582778,106.067033 271.773561,106 270.223563,106 L172.974683,106 C171.897728,106 170.819573,106.067033 170.077591,106.134066 C165.6293,106.537461 161.652852,108.620272 158.485621,111.778004 L122.295384,147.859707 C119.129354,151.018637 117.039078,154.981962 116.63567,159.416912 C116.567235,160.155472 116.5,161.230394 116.5,162.305316 L116.5,280.763379 C116.5,282.308729 116.567235,283.115519 116.63567,283.720012 C117.173547,288.759457 121.756307,293.327276 126.81091,293.864737 C127.418423,293.932967 128.226439,294 129.776437,294 L270.223563,294 C271.773561,294 272.582778,293.932967 273.18909,293.864737 C278.243693,293.327276 282.826453,288.759457 283.365531,283.720012 C283.431565,283.115519 283.5,282.308729 283.5,280.763379 L283.5,119.236621 C283.5,117.691271 283.431565,116.884481 283.365531,116.279988 C282.826453,111.240543 278.243693,106.671527 273.18909,106.134066 Z"/>
            </a>
        </svg>
    </body>
</html>
```
# link.css
```ここに言語を入力
path {
    fill: none;
    stroke: #41c9b4;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    stroke-width: 1;
    -webkit-animation: hello 2s ease-in forwards;
    animation: hello 2s ease-in forwards;
}
@-webkit-keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent;
}
 50% {
 fill:transparent;
}
 100% {
 stroke-dashoffset: 0;
 fill:#333;
}
}
@keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent;
}
 50% {
 fill:transparent;
}
 100% {
 stroke-dashoffset: 0;
 fill:#41c9b4;
}
}

.icon {
    transition: all 0.3s ease 0s;
}
  
.icon:hover {
    fill: #fb8c00;
}
```

svgアニメーションとhoverを両立させたい

あるSVGデータからPythonを使って各要素の座標や大きさを求めたいのですが、アルゴリズムが思いつかなかったり、調べてみてもなかなかヒットしないので助けが欲しいです。

---
やりたいことは以下の通りです↓
![ファ](819e1c7349b56850332836edda0d50bd.png)
例えば２つのsvgのPATHがあるとします（それぞれの要素の属性Dはデタラメです）。ここからなんらかの手法で画像で言う赤い文字のようなXYWH（ではなくても座標や大きさがわかるXYXYでも良い）が取得できるようにしたいです。

説明がわかりにくくてすみません（ベストを尽くしました…）少しでもわかる人はアイデアくれると嬉しいです。追加で必要な情報が欲しい方は言ってください。
よろしくお願いします！

Pythonでsvg内の要素の座標・サイズを取得する方法

### 前提・実現したいこと

SVGファイルを<img>で読み込み,SVGファイル内の<image>を表示させたい。

### 該当のソースコード
test.php
<img src="/svg/test.svg">

test.svg
<image x="72" y="571" width="170" height="300" xlink:href="/image/sample1.jpg" preserveAspectRatio="xMidYMid meet"></image>

### 試したこと

画像をbase64で埋め込むと表示できましたが、埋め込まずに表示させたい。
<object>,<embed>でSVGを埋め込んで表示させましたが、<img>で表示させたい。

### 補足情報（FW/ツールのバージョンなど）
laravel,vue.js

SVGファイルを<img>で読み込み,SVGファイル内の<image>を表示させたい。

### 前提・実現したいこと

ブラウザに描画したSVGをPNGにしてダウンロードさせたいです。
SVGファイル自体はサーバーにアップロードしてありますが、ユーザーがfillの値を操作して塗り絵したデータをPNでGダウンロードさせたいという状況です。

### 試したこと

SVGをcanvasに再描画させ、canvg.jsでPNGに変換・ダウンロードする方法を試しています。
方法そのものがスマートでない場合は、代替手段の手がかりを頂けるとありがたいです。

###コード

```vue.js
<template>
  <div>
    <b-button class="block is-info" @click="downloadSvg">download</b-button>
  </div>
</template>

<script>
import canvg from "canvg";
export default {
  methods: {
    downloadSvg: function() {
      const svgimage = document.getElementsByClassName("calendar-heatmap")[0];
      this.convertSvgToImg(svgimage, this.downloadImg.bind(this));
    },
    convertSvgToImg: function(svg, callback) {
      const canvas = document.createElement("canvas");
      canvas.width = svg.width.baseVal.value;
      canvas.height = svg.height.baseVal.value;
      // svgをcanvasに描画
      const data = new XMLSerializer().serializeToString(svg);
      canvg(canvas, data);
      callback(canvas);
    },
    // 画像ダウンロード
    generateLink: function(fileName, img) {
      const link = document.createElement("a");
      link.download = fileName;
      link.href = img;
      return link;
    },
    downloadImg: function(canvas) {
      const img = canvas.toDataURL("image/png");
      this.generateLink("twithub-result.png", img).click();
    }
  }
};
</script>
```

### エラー

```ここに言語名を入力
vue.runtime.esm.js?ff9b:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'width' of undefined"
```
```
vue.runtime.esm.js?ff9b:1888 TypeError: Cannot read property 'width' of undefined
```

### 補足情報
"canvg": "^3.0.6",
"vue": "^2.5.2",
"vue-head": "^2.2.0",
"vue-router": "^3.0.1"
"buefy": "^0.9.3",

ブラウザに描画したSVGをPNGにしてダウンロード

やりたいことはタイトルの通りです。

現在は`<input type="password">`にしており、
これだとinputすると●になってしまうので、JSで常に`type="text"`に操作しています。

しかし、スマホで確認してみると、この画像のようなkeyのスペースが出てきてしまいました。
![イメージ説明](71035411460e6a4a237a4512854985eb.png)

このバーを消す方法、または
どうにかしてデフォルトで英語のキーボードが出るように設定する方法はないでしょうか。
よろしくお願い致します。

Inputに入力するときにデフォルトで英語キーボードを出したい（スマホ）

- 主に使用している言語
- 職種
- いつ頃から始めたのか
- なぜ？
- 学ぶためにしたこと
- 初めての言語
---
ただの興味心です。よろしければお願いします。
なおHTML,CSSなども含むとします。
```lang-＜ここに言語を入力＞
みなさんありがとうございます。
やっぱり色々コードを見て書いてが一番なんですね。
```

みなさんはなぜプログラミングを学ぼうと思ったのですか？

手放せない、便利、これなしでは仕事したくないというものでも 
特定のフレームワークでしか使えないようなものでも 
便利そうで使ってみたいけどまだ手をだしていないものでも構いません。 

よろしくお願いします。