AMcoder - javascript, python, java, html, php, sql

Տեղափոխու՞մ եք կոճակը SVG-ի մեջտեղում:

Ո՞րն է SVG-ի մեջտեղում նվագարկման կոճակը տեղափոխելու լավագույն միջոցը: Կա՞ որևէ մեկը, ով կարող է օգնել ինձ դա անել:

Ամբողջ ծածկագիրը ներկայացված է ստորև: Դա ինձ ասում է, որ ավելացնեմ ավելի շատ մանրամասներ, բայց դա մոտ է: Ես դրել եմ ամբողջ կոդը ստորև:

https://jsfiddle.net/cy8v6657/1/

    <svg width="238" height="238" viewBox="0 0 238 238">
      <rect x="0" y="0" width="238" height="238" fill="blue" />
      <rect x="7" y="7" width="224" height="224" fill="black" />
      <rect x="14" y="14" width="210" height="210" fill="red" />
      <rect x="21" y="21" width="196" height="196" fill="black" />
      <rect x="28" y="28" width="182" height="182" fill="yellow" />
      <rect x="35" y="35" width="168" height="168" fill="black" />
      <rect x="42" y="42" width="154" height="154" fill="orange" />
      <rect x="49" y="49" width="140" height="140" fill="black" />
      <rect x="56" y="56" width="126" height="126" fill="lime" />
      <rect x="63" y="63" width="112" height="112" fill="black" />
      <rect x="70" y="70" width="98" height="98" fill="teal" />
      <rect x="77" y="77" width="84" height="84" fill="black" />
      <rect x="84" y="84" width="70" height="70" fill="silver" />
      <rect x="91" y="91" width="56" height="56" fill="black" />
      <rect x="98" y="98" width="42" height="42" fill="#1155cc" />
      <rect x="105" y="105" width="28" height="28" fill="black" />
      <rect x="112" y="112" width="14" height="14" fill="gold" />
    </svg>
    
    
    
    <button id="playButton2" style="width:50px; height:50px; border:none; cursor: pointer; background-color:transparent; background-image: url('https://i.imgur.com/A445IfJ.png')" onclick=" 
    var player = document.getElementById('player');
    player.volume=1.0; 
    var button = document.getElementById('playButton2');
    if (player.paused) {
        playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/qg4rg7Z.png\')';
        player.play();
      } else {
        playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/A445IfJ.png\')';
        player.pause();
      }">
     </button>
    
    <audio id="player" preload="none" style="display:none;">
    <source src='' type='audio/mpeg'/>
    </audio>

svg html css
12.10.2017

Պատասխանները:


1
  1. Տեղադրեք երկուսն էլ՝ ձեր svg-ն և ձեր կոճակը, փաթաթվածի մեջ:
  2. Տվեք relative դիրքը այս փաթաթվածին:
  3. Կենտրոնացրեք կոճակը, օգտագործելով բացարձակ դիրքավորումը փաթաթման բաժանման ներսում:

#svg-wrapper{
  position: relative;
  width: 238px;
  height: 238px;
}
#svg-wrapper #playButton2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div id="svg-wrapper">
<svg width="238" height="238" viewBox="0 0 238 238">
      <rect x="0" y="0" width="238" height="238" fill="blue" />
      <rect x="7" y="7" width="224" height="224" fill="black" />
      <rect x="14" y="14" width="210" height="210" fill="red" />
      <rect x="21" y="21" width="196" height="196" fill="black" />
      <rect x="28" y="28" width="182" height="182" fill="yellow" />
      <rect x="35" y="35" width="168" height="168" fill="black" />
      <rect x="42" y="42" width="154" height="154" fill="orange" />
      <rect x="49" y="49" width="140" height="140" fill="black" />
      <rect x="56" y="56" width="126" height="126" fill="lime" />
      <rect x="63" y="63" width="112" height="112" fill="black" />
      <rect x="70" y="70" width="98" height="98" fill="teal" />
      <rect x="77" y="77" width="84" height="84" fill="black" />
      <rect x="84" y="84" width="70" height="70" fill="silver" />
      <rect x="91" y="91" width="56" height="56" fill="black" />
      <rect x="98" y="98" width="42" height="42" fill="#1155cc" />
      <rect x="105" y="105" width="28" height="28" fill="black" />
      <rect x="112" y="112" width="14" height="14" fill="gold" />
    </svg>
    
    
    
    <button id="playButton2" style="width:50px; height:50px; border:none; cursor: pointer; background-color:transparent; background-image: url('https://i.imgur.com/A445IfJ.png')" onclick=" 
    var player = document.getElementById('player');
    player.volume=1.0; 
    var button = document.getElementById('playButton2');
    if (player.paused) {
        playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/qg4rg7Z.png\')';
        player.play();
      } else {
        playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/A445IfJ.png\')';
        player.pause();
      }">
     </button>
   </div><!--#svg-wrapper-->
    
    <audio id="player" preload="none" style="display:none;">
    <source src='' type='audio/mpeg'/>
    </audio>

Թարմացնել Եթե դուք չեք կարող օգտագործել արտաքին ոճաթերթը ինչ-ինչ պատճառներով, ինչպես նշել եք մեկնաբանություններում, կարող եք օգտագործել նույն ոճերը ներդիրում:

Փոխեք հետևյալ տողերը.

<div id="svg-wrapper" style="position: relative;width: 238px;height: 238px;">

<button id="playButton2" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width:50px; height:50px; border:none; cursor: pointer; background-color:transparent; background-image: url('https://i.imgur.com/A445IfJ.png')" onclick=" 
    var player = document.getElementById('player');
    player.volume=1.0; 
    var button = document.getElementById('playButton2');
    if (player.paused) {
        playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/qg4rg7Z.png\')';
        player.play();
      } else {
        playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/A445IfJ.png\')';
        player.pause();
      }">
     </button>
12.10.2017
  • Կա՞ դա անելու HTML եղանակ: 12.10.2017
  • html ճանապարհը նշանակում է? առանց css-ի օգտագործման? 12.10.2017
  • Այո, ես դա նկատի ունեմ: 12.10.2017
  • Կա՞ որևէ սահմանափակում՝ կապված css-ի օգտագործման հետ: Եթե ​​նախընտրում եք այդպես, կարող եք ավելացնել css կանոնները ներդիրում, ինչպես արել եք ձեր #playButton2 տարրի համար: 12.10.2017
  • Կարծում եմ, որ դա ճիշտ չեմ անում, խնդրում եմ, կարո՞ղ եք ցույց տալ: 12.10.2017
  • @svgcoding Ես ավելացրել եմ թարմացված կոդը: Խնդրում ենք ստուգել, ​​արդյոք սա այն է, ինչ ձեզ հարկավոր է: 12.10.2017
  • Ես դրեցի դա և կարծես թե չի աշխատում, եթե ինչ-որ բան սխալ չեմ անում: jsfiddle.net/cy8v6657/6 12.10.2017
  • @svgcoding դուք պարզապես պետք է տեղափոխեք բացվող #svg-wrapper թեգը svg-ից առաջ: Ստուգեք այստեղ jsfiddle.net/cy8v6657/10 12.10.2017
    • Նոր նյութեր
    Օգտագործելով Fetch Vs Axios.Js-ը՝ HTTP հարցումներ կատարելու համար
    JavaScript-ը կարող է ցանցային հարցումներ ուղարկել սերվեր և բեռնել նոր տեղեկատվություն, երբ դա անհրաժեշտ լինի: Օրինակ, մենք կարող ենք օգտագործել ցանցային հարցումը պատվեր ներկայացնելու,..
    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար
    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար Ինչպե՞ս հանգստացնել ձեր միտքը և աշխատեցնել ձեր պրոցեսորը: Ինչպես մնալ հանգիստ և զարգանալ ճնշման տակ...
    Մեքենայի ուսուցում բանկային և ֆինանսների ոլորտում
    Բարդ, խելացի անվտանգության համակարգերը և հաճախորդների սպասարկման պարզեցված ծառայությունները բիզնեսի հաջողության բանալին են: Ֆինանսական հաստատությունները, մասնավորապես, պետք է առաջ մնան կորի..
    Ես AI-ին հարցրի կյանքի իմաստը, այն ինչ ասում էր, ցնցող էր:
    Այն պահից ի վեր, երբ ես իմացա Արհեստական ​​ինտելեկտի մասին, ես հիացած էի այն բանով, թե ինչպես է այն կարողանում հասկանալ մարդկային նորմալ տեքստը, և այն կարող է առաջացնել իր սեփական արձագանքը դրա..
    Ինչպես սովորել կոդավորումը Python-ում վագրի պես:
    Սովորելու համար ծրագրավորման նոր լեզու ընտրելը բարդ է: Անկախ նրանից, թե դուք սկսնակ եք, թե առաջադեմ, դա օգնում է իմանալ, թե ինչ թեմաներ պետք է սովորել: Ծրագրավորման լեզվի հիմունքները, դրա..
    C++-ի օրական բիթ(ե) | Ամենաերկար պալինդրոմային ենթաշարը
    C++ #198-ի ամենօրյա բիթ(ե), Ընդհանուր հարցազրույցի խնդիր. Ամենաերկար պալինդրոմային ենթատող: Այսօր մենք կանդրադառնանք հարցազրույցի ընդհանուր խնդրին. Ամենաերկար palindromic substring...
    Kydavra ICAReducer՝ ձեր տվյալների ծավալայինությունը նվազեցնելու համար
    Ի՞նչ է ICAReducer-ը: ICAReducer-ն աշխատում է հետևյալ կերպ. այն նվազեցնում է նրանց միջև բարձր փոխկապակցված հատկանիշները մինչև մեկ սյունակ: Բավականին նման է PCAreducer-ին, չնայած այն..