web2(自分用)

mouchan51

svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="svg001.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item" onclick="showZoomed(this)">
            <svg id="svg001" class="hidden-svg" viewBox="0 0 300 200">
                <rect x="10" y="10" width="260" height="140" rx="30" ry="30" stroke="blue" stroke-width="10px" fill="lightblue"/>
            </svg>
        </div>
        <div class="grid-item" onclick="showZoomed(this)">
            <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- 画像を読み込みます -->
                <image xlink:href="img1.jpg" x="0" y="0" width="500" height="500"/>
            
                <!-- 画像の上にテキストを表示します -->
                <text x="50" y="50" font-family="Arial" font-size="24" fill="red">ここにテキスト</text>
            </svg>
        </div>
        <div class="grid-item" onclick="showZoomed(this)">
            <svg id="svg001" class="hidden-svg" viewBox="0 0 300 200">
                <rect x="10" y="10" width="260" height="140" rx="30" ry="30" stroke="blue" stroke-width="10px" fill="red"/>
            </svg>
        </div>
      </div>
      
      <!-- モーダルウィンドウ -->
      <div id="modal" class="modal" onclick="closeZoomed()">
        <svg width="600" height="400" id="modal-svg">
          <!-- こちらにクリックされたSVGの内容がコピーされる -->
        </svg>
      </div>
      
      <script src="svg001.js"></script>
</body>
</html>


.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.modal {
    position: fixed;
    top: 50%;
    /* 中央に配置 */
    left: 50%;
    /* 中央に配置 */
    transform: translate(-50%, -50%);
    /* 中央揃えの補正 */
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    width: 620px;
    /* SVGのサイズ + 余白 */
    height: 420px;
    /* SVGのサイズ + 余白 */
    padding: 5px;
    border-radius: 5px;
    transform: translate(-50%, -50%) scale(0);
    /* 初期状態はサイズ0 */
    transition: transform 0.3s ease-out;
    /* スムーズなトランジションを追加 */
}



 #modal -svg {
    cursor: pointer;
    width: 600px;
    /* オリジナルサイズの2倍 */
    height: 400px;
    /* オリジナルサイズの2倍 */
}
function showZoomed(element) {
    let modal = document.getElementById("modal");
    let modalSvg = document.getElementById("modal-svg");
    
    // 元のSVGの内容とviewBoxをモーダルウィンドウのSVGにコピー
    modalSvg.innerHTML = element.querySelector("svg").innerHTML;
    modalSvg.setAttribute('viewBox', element.querySelector("svg").getAttribute('viewBox'));
  
    // モーダルウィンドウの表示
    modal.style.display = "flex";
  
    // 少しの遅延の後に、モーダルを拡大
    setTimeout(() => {
      modal.style.transform = "translate(-50%, -50%) scale(1)";
    }, 10);
  }
  
  function closeZoomed() {
    let modal = document.getElementById("modal");
    
    // 元のサイズに戻す
    modal.style.transform = "translate(-50%, -50%) scale(0)";
    
    // アニメーションが終了した後に、モーダルの表示を非表示にする
    setTimeout(() => {
      modal.style.display = "none";
    }, 300); // 0.3sのアニメーション時間に合わせる
  }
  
function removeParenthesesContent(str) {
  return str.replace(/\(.*?\)/g, '');
}

const data = "国語算数理科(英語社会)";
const result = removeParenthesesContent(data);
console.log(result);  // "国語算数理科"

<button onclick="appendToText()">クリップボードの内容を取得</button>
<textarea id="output"></textarea>

async function appendToText() {
    try {
        const clipboardText = await navigator.clipboard.readText();
        const textarea = document.getElementById('output');
        textarea.value += clipboardText + "\n";
    } catch (err) {
        console.error('クリップボードの内容を取得できませんでした: ', err);
    }
}

この記事が気に入ったらサポートをしてみませんか？