Wednesday, September 4, 2013

SVG - viewBox

ViewBox value will be set relevant with the x,y coodirnator.
If x,y ~ 1-10 -> viewBox width,height: 10,10 ....

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="200px" version="1.1"
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example ViewBox - uses the viewBox 
   attribute to automatically create an initial user coordinate
   system which causes the graphic to scale to fit into the
   viewport no matter what size the viewport is.</desc>
  <!-- This rectangle goes from (0,0) to (1500,1000) in user space.
       Because of the viewBox attribute above,
       the rectangle will end up filling the entire area
       reserved for the SVG content. -->
  <rect x="0" y="0" width="1500" height="1000" 
        fill="yellow" stroke="blue" stroke-width="12"  />
  <!-- A large, red triangle -->
  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/>
  <!-- A text string that spans most of the viewport -->
  <text x="100" y="600" font-size="200" font-family="Verdana" >
    Stretch to fit
  </text>
</svg>

Example ViewBox
Rendered into
viewport with
width=300px,
height=200px
     Rendered into
viewport with
width=150px,
height=200px
Example ViewBox - stretch to fit 300 by 200     Example ViewBox - stretch to fit 150 by 200

http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

Related Posts:

  • Mobile - Unlock & Root HTC Phone A. UNLOCK BOOTLOADER. 1/ Tình hình Chung: - Do một số bạn còn mới sử dụng One X hay Android của HTC còn bỡ ngỡ với cách hướng dẫn Unlock Bootloader của HTC nên mình viết bài này để các bạn có thể thực hiện một cách đơn … Read More
  • Manual update HTC One X to official Android OTA Make sure that the phone’s bootloader is unlocked and it has custom recovery (CWM) installed. HTC One X should be running firmware version 3.20.401.3 otherwise you will receive an error. Download HTC One X official Android 4… Read More
  • Business Process Management Đối với mỗi doanh nghiệp, việc ký duyệt các văn bản nội bộ để đưa ra một quyết định sản xuất, kinh doanh, cung cấp dịch vụ hoặc đơn giản chỉ là một sự thay đổi đơn hàng, yêu cầu nguyên vật liệu, một quyết định nâng cấ… Read More
  • Business Analysis - Phân tích nghiệp vụ Kỹ năng phân tích - Điều kiện tiên quyết của nghề Phân tích nghiệp vụ Bạn đã bao giờ nghe nói đến nghề "Chuyên viên phân tích nghiệp vụ" - Business Analyst (BA)? Đó là nghề gì vậy? Bạn cần những kỹ năng nào để … Read More
  • HTC - Flash Custom ROMYour CID number must be exactly the same. If it's written "HTC__001" it means you can't flash it, if your CID is "02__001". The whole text must match! … Read More

0 comments:

Post a Comment