Атрибут border тега <object> — рамка навколо об'єкта

HTML

<p class="head">1. Без атрибута — 120×80</p>
<object class="o" type="image/svg+xml" width="120" height="80"
        data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='80'%3E%3Crect%20width='120'%20height='80'%20fill='%232f6fd0'/%3E%3C/svg%3E"></object>

<p class="head">2. border="10" — уже 140×100</p>
<object class="o" type="image/svg+xml" width="120" height="80" border="10"
        data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='80'%3E%3Crect%20width='120'%20height='80'%20fill='%232f6fd0'/%3E%3C/svg%3E"></object>

<p class="head">3. border="0" і 4. border="abc" — ширина та сама, але стиль рамки вже solid</p>
<object class="o zbudzena" type="image/svg+xml" width="120" height="80" border="0"
        data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='80'%3E%3Crect%20width='120'%20height='80'%20fill='%2372b043'/%3E%3C/svg%3E"></object>
<object class="o zbudzena" type="image/svg+xml" width="120" height="80" border="abc"
        data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='80'%3E%3Crect%20width='120'%20height='80'%20fill='%2372b043'/%3E%3C/svg%3E"></object>
<p class="note">Обом додано в стилях лише border-width: 6px — жодного кольору й
   стилю лінії. У сусідів без атрибута те саме правило не намалювало б нічого.</p>

<p class="head">5. border="10", але в стилях border: 1px dotted — виграє CSS</p>
<object class="o css" type="image/svg+xml" width="120" height="80" border="10"
        data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='80'%3E%3Crect%20width='120'%20height='80'%20fill='%23f2b134'/%3E%3C/svg%3E"></object>

<p class="head">6. Вміст не завантажився — рамка обводить запасний текст</p>
<object class="o" type="image/svg+xml" width="120" height="80" border="10"
        data="nemaje-takoho-fajlu.svg">Запасний текст замість об'єкта</object>

CSS

.head {
    margin: 18px 0 6px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.o {
    display: inline-block;
    margin-right: 14px;
    vertical-align: top;
    outline: 1px dashed #d64545;
    outline-offset: 0;
}

/* самої лише товщини досить, щоб рамка з border="0" проявилася */
.zbudzena {
    border-width: 6px;
}

.css {
    border: 1px dotted #2f6fd0;
}

.note {
    max-width: 520px;
    margin: 8px 0 0;
    color: #5a6472;
    font-size: .9em;
}

HTML

<h3>Приклад з використанням атрибуту <code>border</code></h3>
<object id ="a" width="300" height="300" border="15"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>

<h3>Приклад без використання атрибуту <code>border</code></h3>
<object  width="300" height="300"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>

CSS

#a{
  border-color:red;
}

HTML

<p>У цьому прикладі, Ви можете змінювати значення для властивості border в межах від 0 до 100 переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" min="0" max="100" step="1" value="0" id="range" onmousemove="f()"> 

<hr>

<div class="block1">
  <p> З використанням атрибута border  
  </p>
  <p class = "text"  style ="color:red">
   <object id ="image" width="300" height="300" border="0"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>

</div>

<div class="block2">
  
 <p> Без використанням атрибута border
  </p>
  <p style ="color:#c500c5">
<object  width="300" height="300" id="image"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>
 
</div>

CSS

*{
  text-align:center;
}

.block1{
  float:left;
  border-right:1px solid;
}

.block2{
  float:left;
}


object{
  Width:80%;
}

JS

text.innerHTML = "Поточна товщина рамки: 0";
function f() {
  var range = document.getElementById("range").value;
  var element = document.getElementById("image");
  var text = document.getElementById("text");

  element.setAttribute("border", range);
  text.innerHTML = "Поточна товщина рамки:" + range;
}
//# sourceURL=pen.js